探索el-table列宽自适应内容的实现

最近项目上线之后，产品对首页的列表提出了列宽自适应内容的需求，即列的宽度由当前列中内容最宽的一个单元格决定（单元格内容不换行）。项目中的表格使用的是element-ui的table组件，非常强大，满足了各种各样的需求，例如固定列，固定表头，展开行等等。但是面对这样的需求，貌似并没有直接提供配置项支持。

思路一：Fit属性

最早接到这个需求的第一反应是想到element文档中提到的fit属性。在仔细查阅了文档之后，发现这个属性是默认开启的，实际上fit的准确含义是所有列撑满整个表格所在的容器。fit属性的相关源码如下：

    //没有指定宽度的列
    let flexColumns = flattenColumns.filter((column) => typeof column.width !== 'number');
    const fit = this.fit;
    const bodyWidth = this.table.$el.clientWidth;
    let bodyMinWidth = 0;
    if (flexColumns.length > 0 && fit) {
      //获取表格的最小宽度
      flattenColumns.forEach((column) => {
        bodyMinWidth += column.width || column.minWidth || 80;
      });

      const scrollYWidth = this.scrollY ? this.gutterWidth : 0;
      //如果最小宽度小于容器宽度，即没有撑满容器
      if (