Elementui里的表格组件各个内容自适应宽度

 <el-table  :data="projectList" >
      <el-table-column label="项目标记" align="center" prop="type" :width="flexWidth('type',projectList,'项目标记')" />
 </el-table>

   flexWidth(prop, projectList, title, num = 0) {
      if (projectList.length === 0) {//表格没数据不做处理
        return;
      }
      let flexWidth = 0;//初始化表格列宽
      let columnContent = '';//占位最宽的内容
      let canvas = document.createElement("canvas");
      let context = canvas.getContext("2d");
      context.font = "14px Microsoft YaHei";
      if ((prop === '') && title) {//标题长内容少的，取标题的值,
        columnContent = title
      } else {// 获取该列中占位最宽的内容
        let index = 0;
        for (let i = 0; i < projectList.length; i++) {
          const now_temp = projectList[i][prop] + '';
          const max_temp = projectList[index][prop] + '';
          const now_temp_w = context.measureText(now_temp).width
          const max_temp_w = context.measureText(max_temp).width
          if (now_temp_w > max_temp_w) {
            index = i;
          }
        }
        columnContent = projectList[index][prop]
        //比较占位最宽的值跟标题、标题为空的留出四个位置
        const column_w = context.measureText(columnContent).width
        const title_w = context.measureText(title).width
        if (column_w < title_w) {
          columnContent = title || '留四个字'
        }
      }
      // 计算最宽内容的列宽
      let width = context.measureText(columnContent);
      flexWidth = width.width + 40 + num
      return flexWidth + 'px';
    },
//projectList是数组数据，通过width来自适应内容宽度，通过上述写法自己按照自己的项目内容来就可以