el-table动态表格自适应宽度

问题描述

由于表头和列是分开渲染的，通过el-table 设置fit属性，只能撑开表头，但是没有办法根据列的内容去适应宽度。

---

解决方案：

代码逻辑是通过vue 的watch 监控表格的数据data，计算每列的内容和表头的最大宽度，计算的时候把表格内容使用span标签包裹，然后计算span标签的宽度width：px，然后再加上表格的内边距，就得到了列的最大宽度.

<el-table :data="tableData"  v-loading="loading" style="width: 100%;" >
      <el-table-column v-for="(item,index) in tableThead"
                   :key="index"
                   :label="item.label"
                   :prop="item.prop"
                   :width="item.width"  <!-- 设置宽度 -->
                   show-overflow-tooltip>
    </el-table-column>
</el-table>

<script>
const fields = [
   { label: '目标名称', prop: 'CompanyName' },
   { label: '编号', prop: 'Number' },
   { label: '参数名称', prop: 'IndexName' },
   { label: '单位', prop: 'IndexUnit' },
   { label: '合计', prop: 'Total' },
]
export default {
    data() {
        return {
            tableData: [], //表格数据
     	    tableHead: fields,
        };
    },

    methods: {
        /**
        * 遍历列的所有内容，获取最宽一列的宽度
        * @param arr
        */
        getMaxLength (arr) {
          return arr.reduce((acc, item) => {
            if (item) {
              let calcLen = this.getTextWidth(item)
              if (acc < calcLen) {
                acc = calcLen
              }
            }
            return acc
          }, 0)
        },
        /**
         * 使用span标签包裹内容，然后计算span的宽度 width： px
         * @param valArr
         */
        getTextWidth(str) {
          let width = 0;
          let html = document.createElement('span');
          html.innerText = str;
          html.className = 'getTextWidth';
          document.querySelector('body').appendChild(html);
          width = document.querySelector('.getTextWidth').offsetWidth;
          document.querySelector('.getTextWidth').remove();
          return width;
        }
    },

    watch: {
        /**
         * 监控表格的数据data，自动设置表格宽度
         * @param valArr
         */
        data(valArr) {
            const _this = this
            this.tableThead = fields.map(function (value) {
                const arr = valArr.map(x => x[value.prop])  // 获取每一列的所有数据
                arr.push(value.label)  // 把每列的表头也加进去算
                value.width = _this.getMaxLength(arr) + 20 // 每列内容最大的宽度 + 表格的内间距(依据实际情况而定)
                return value
            })
        }
    }
}
</script>