为什么建议你常阅读源码？

➢ 一个问题

表格的其中某一列是需要宽度自适应,其他列的宽度固定.(整个表格宽度固定)

使用属性绑定的方式

 <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即可,需要固定的只要width有值即可

data=[
    {
        width:undefined;
        minWidth:90px;
        lable:`name`;
    },
    {
        width:100px;
        minWidth:100px;
        lable:`name`;
    }
]

打赏赞