Element UI实现表格列宽随内容自适应

两种方法：
方法一、计算文本内容宽度，遍历第一行数据，取最宽的值，设置width属性
计算文本有两种方法
计算方法1，使用canvas计算，在有的浏览器可能不太准确：

export function getTextWidth(text, font = 'normal 14px sans-serif') {
  if (!text) {
    return 0
  }
  // re-use canvas object for better performance
  const canvas = getTextWidth.tCanvas || (getTextWidth.tCanvas = document.createElement('canvas'))
  const context = canvas.getContext('2d')
  context.font = font
  return context.measureText(text).width + 2
}

计算方法2，把文本放入el-table表格取元素宽度，这个比第一个用canvas的方法更准确，但要慢一些，因此用了缓存宽度加快速度：

      
    

 /*计算宽度表格样式*/
 ::v-deep .el-table.fit-table table.el-table__body {
    font-family: "PingFang SC", "微软雅黑", "Microsoft YaHei", "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
    font-size: 14px;
    table-layout: auto;
    position: absolute;
    top: -1000px;
    visibility: hidden;

    .cell {
      white-space: nowrap;
    }

  }
    //计算方法
    const cachedCellWidth = {}
    getCellWidth(text) {
      if (!text) {
        return 0
      }
      if (cachedCellWidth[text]) {
        return cachedCellWidth[text]
      }
      if (this.$el) {
        const fitCell = this.$el.querySelector('.fit-table .cell')
        if (fitCell != null) {
          fitCell.innerHTML = text
          const width = fitCell.clientWidth + 2
          cachedCellWidth[text] = width
          return width
        }
      }
    }

表格演示代码，多行数据需遍历计算最长的宽度，省略了自己写一下吧

方法二、设置表格样式table-layout: 'auto'，让表格自适应文本内容，但需要根据单元格的宽度调整表头的宽度。这个方法的几个问题待优化：
1、表格加载数据时，表头宽度变化会闪烁一下
2、而且对于fixed属性的单元格宽度计算有点问题
css样式

table.el-table__body {
   table-layout: auto;
 }

.cell {
   white-space: nowrap;
}

.el-table__fixed-body-wrapper table.el-table__body {
   table-layout: fixed;
 }

根据内容调整表头代码

    updated() {
      setTimeout(() => {
        const table = this.$refs['base-table'].$el
        const colgroup = table.querySelector('.el-table__header colgroup')
        const colDefs = colgroup.querySelectorAll('col')
        colDefs.forEach(col => {
          const clsName = col.getAttribute('name')
          //获取第一行单元格的宽度
          const cell = table.querySelector(`.el-table__body td.${clsName}`)
          if (cell) {
            //设置表头的宽度和单元格宽度一样
            const width = cell.clientWidth
            col.setAttribute('width',width)
          }
      }, 300)
    },