实现el-table-column列宽根据内容自适应且无数据时自动撑开表头

使用element-ui在移动端进行数据展示时，表头都是根据设定width和min-width来撑开的。但有时单条数据的内容会很多，不希望每个表格的高度不一致，所以有了希望根据表格数据最长的长度来设置表头宽度的需求。

这里是利用了一个插件ExTableColumn，具体操作方法：
通过继承实现el-table-column列宽根据内容自适应

大神写的插件，用npm下载到项目中，根据里边的步骤配置，是可用的。 但使用的时候遇到了一些问题，记录一下。

1.表格没有任何变化，但是表格里面的数据内容超出了边框

可能原因：表格数据如果是从接口获取的，获取接口需要时间，一定要有值再显示表格。
解决办法：先将tableData值置为空，然后再用v-if来控制，当tableData的值不为空时显示表格，如果改变了tableData的值，也记得先将tableData置为空就好了。

<el-table
   v-if="dataList.length > 0"
   class="list-table"
   :data="dataList"
   :height="tableHeight"
   ref="table"
>el-table>

// 加载列表
    load() {
     
      this.dataList = [];//先置空，保证请求接口后得到了值，会刷新页面
      this.loading = true;
      getLeadCusList({
     
        id: this.id,
        Name: this.Name,
      }).then((res) => {
     
        this.loading = false;
        this.dataList = res.data;
      });
    },

2.某个表头隐藏了或者…显示

可能原因：当其中一个表头下面所有的数据都为’ '，表格没有办法被撑开。
解决办法：改变minWidth。
参考 ExTableColumn.js代码，发现其最终宽度由计算属性中的realMinWidth来决定，而它的值由minWidth和autoWidth来决定，autoWidth是通过复杂操作计算出来的，而minWidth在js中则没有设置默认值，也没有赋值，所以，我理解的minWidth是来源于element-ui的源码中的值，也许和表头中min-width属性有关联（此处暂时没有深究下去）。

 computed: {
     
    realMinWidth() {
     
      if (this.autoFit) {
     
        return parseMinWidth(this.max([this.minWidth, this.autoWidth]));
      }
      return TableColumn.computed.realMinWidth.call(this)
    },
  },

所以改变了minWidth的默认值，就可以实现了。具体操作是在ExTableColumn.js中的props中增加一个minWidth值。

props: {
     
    fitByClass: {
     
      type: String,
      default: 'cell',
    },
    autoFit: {
     
      type: Boolean,
      default: false,
    },
    fitGap: {
     
      type: Number,
      default: 0,
    },
    fitHeader: {
     
      type: Boolean,
      default: false,
    },
    //新增的最小表头宽度默认值
    minWidth:{
     
      type:Number,
      default: 100,//这里我给了100，根据自己的表头内容长度更改
    }
  },

注意：这个默认的minWidth值只有和 :autoFit="true"属性搭配才会生效；如果 :autoFit="false"的话，正常设置width属性就好。

如有不准确之处欢迎大佬们指正，如果有帮助到您也请多多点赞和评论呀~我是前端小桃，我在这里成长。