一、原因 一般是因为el-table的父元素设置了flex:1导致。 二、解决方法 1. 在父元素中使用width:100%;父元素的父元素可使用flex: 1; 具体可参考下图 2. 不使用flex,使用具体宽度,或百分比,或calc 来设置表格宽度
Debug:通过控制台发现组件生成的table的宽度是动态计算的,翻查源码,发现以下代码段 也就是说,组件的resize事件是绑定在this.$el上了,这应该就是的原因所在了。 flex容器下的width:100%会一直向上继承,直到flex容器下第一级子元素,但是当某个子元素的宽度出现固定值并且大于flex伸展的宽度的时候,那么容器就不会收缩...
造成这个问题的关键是表格的宽度把flex布局给撑开了,所以应该设置min-width:0;这样就不会有这样的问题。 7月前 0 分享 回复 海苔饭团 ... 不懂就问,element-plus和element ui有什么区别呀? 3年前 0 分享 回复 展开2条回复 ⚝丨摈住呼吸 ... ...
// 设置最小宽度 flexWidth = 80 } // flexWidth += 30 return flexWidth + 'px' }
</el-table> </template> 给需要自适应列宽的column写一个动态的width :width="flexColumnWidth(label,prop)" <script> export default { methods: { /** * 遍历列的所有内容,获取最宽一列的宽度 * @param arr / getMaxLength (arr) { return arr.reduce((acc, item) => { ...
在Element UI中,实现el-table表格宽度自适应可以通过多种方法来实现,包括使用百分比宽度、flex布局、动态计算列宽等。以下是一些具体的实现步骤和代码示例: 1. 使用百分比宽度 这是最简单的方法,只需将el-table的width属性设置为百分比值,例如width="100%",这样表格的宽度就会根据父容器的宽度自动调整。 html <...
el-table表头宽度自定义 el-table表头宽度⾃定义 场景：1. 某列表头⽂字内容过长，要对每列表头⾃定义宽度 2. 表格row的每⼀column⽂字不换⾏，超过列宽则省略，mouseover有提⽰ 3. 对于label做滤值处理 <template> <el-row> <el-col :span="24"> <template> <el-table :data="tableData"...
需要自适应宽度的数据string,直接是在数组每一项下 <template> <div style="width:1400px;"> <el-table border :data="tableData" fit style="width: 100%"> <el-table-column label="日期" :width="flexColumnWidth('string',tableData)">
el-table的父元素不能是flex:1的元素,需要在外面再加一层元素,并且父元素设置成absolute,祖父元素设置成relative即可。 <div class="table-wrap"> <div class="table-content"> <el-table :data="tableData"> ... </el-table> </div> </div> ...