elementUI table动态计算列宽度

使用table组件如果表格列过多并且是动态列，列的宽度固定非常不美观，如果不设置列宽就会这样

非常不美观，所以我用以下方法自动计算动态列宽，再也不用担心列会出现以上问题，具体实现代码如下：

数据结构：{ "data": { "fieldList": [ { "examinerFieldName": "name", "examinerFieldChname": "名字" }, { "examinerFieldName": "age", "examinerFieldChname": "年龄" } ], "resultList": [ { "name": "张三", "age": "25" }, { "name": "李四", "age": "29" } ] } }

/**
 * 遍历列的所有内容，获取最宽一列的宽度
 * @param {数组} arr
 */
function getMaxLength (arr){
  return arr.reduce((acc, item) => {
    if (item) {
      let calcLen = getTextWidth(item)
      if (acc < calcLen) {
        acc = calcLen
      }
    }
    return acc
  }, 0)
}
/**
 * 使用span标签包裹内容，然后计算span的宽度 width： px
 * @param {*} str 
 */
function 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+60;
  //  return width+60;
}
/**
 * 监听fieldList变化
 * @param {fieldList} fields 
 * @param {变化的值} valArr 
 * @param {英文名} prop 
 * @param {中文名} label 
 */
function filedListSort(fields,valArr,prop,label){
  let array=[]
   fields.map( (value)=> {
    const arr = valArr.map(x => x[value[prop]])  // 获取每一列的所有数据
    arr.push(value[label])  // 把每列的表头也加进去算
    value.width = getMaxLength(arr) // 每列内容最大的宽度 + 表格的内间距(依据实际情况而定)
    array.push(value)
})
return array
}