表格的其中某一列是需要宽度自适应,其他列的宽度固定.(整个表格宽度固定)
使用属性绑定的方式
<el-table-column :prop="item.prop" :label="item.lable" :width="item.width" :minWidth="item.minWidth"> </el-table-column>
如果只用minWidth
,不用width
属性,那么所有列都会自适应
如果同时使用width
和minWidth
,那么minWidth
不生效
但是width
又不支持%
的单位,只支持px
,好像没什么办法
➢ 查看源码
地址: https://github.com/ElemeFE/element/blob/dev/packages/table/src/table-column.js
if (!column.minWidth) { column.minWidth = 80; } column.realWidth = column.width === undefined ? column.minWidth : column.width; return column;
可以看到如果width
有值,就是使用width
,不使用minWidth
但是如果width
为undefined
,那么就是用minWidth
的值
➢ 修改代码
原先的数据结构
data=[ { width:90px; lable:`name`; } ]
增加需求后
这样表格都会自适应(width
的固定值,空字符串,百分比都不行)
data=[ { width:90px; minWidth:90px; lable:`name`; }, { width:``; minWidth:90px; lable:`name`; } ]
查看源码后
只要在需要自适应的列数据width
设为undefined
有值即可
data=[ { width:undefined; minWidth:90px; lable:`name`; }, { width:100px; minWidth:100px; lable:`name`; } ]