利用canvas测量文字的真实宽度设置el-table每列列宽

首先，在watch里监听table绑定的data：

data(valArr) {
      const _this = this
      this.formThead = this.formThead.map(function (value) {
        const arr = valArr.map((x) => x[value.code]) // 获取每一列的所有数据
        arr.push(value.name) // 把每列的表头也加进去算
        value.width = _this.getMaxLength(arr) + 20 // 每列内容最大的宽度 + 表格的内间距
        return value
      })
    }

计算每列最大宽度：

getMaxLength(arr) {
  String.prototype.pxWidth = function (font) {
  var canvas = String.prototype.pxWidth.canvas || (String.prototype.pxWidth.canvas = document.createElement('canvas')),
    context = canvas.getContext('2d')

  font && (context.font = font)
  var metrics = context.measureText(this)
  return metrics.width
  }
  return arr.reduce((acc, item) => {
      if (item) {
        const calcLen = (item + '').pxWidth('bold 12pt arial') //item可能不为字符串，需转换下
        if (acc < calcLen) {
          acc = calcLen
        }
      }
      return acc
  }, 0)
},