elementUI 表格宽度自适应、不换行

问题

表格数据出现折行，如图：

image.png

解决方案一

• 表格加table-layout='auto’属性
• 表格加tableAuto类名
• el-table-column标签不设置宽度

     
 

//设置超出不折行
.tableAuto.el-table .cell {
  white-space: nowrap;
}

弊端：
1.el-table-column左侧多个列加fixed属性，左右滑动，列宽得提前计算
2.el-table设置table-layout='auto’ 与 固定表头 的功能冲突，表头无法再固定

解决方案二（推荐）

此方案能避免方案一的两个弊端，不影响其他属性，有利于功能拓展
el-table-column加width属性

canvas动态计算el-table-column宽度，结合computed，优化计算性能

 /**
     * 计算table每一列的宽度
     * @param colLabel 每列title {workDate: '班组',userNo: '工号',date: '生产日期',isQ: '是否质检'}
     * @param tableData 表格数据
     * @returns 列信息 {workDate: {label: '班组', width: 206},...}
     *
     */
    function calColWidth(colLabel, tableData){
      let canvas = document.createElement("canvas");
      let context = canvas.getContext("2d");
      context.font = "14px Microsoft YaHei";
      return computed(()=>{
        let res = {};
        for(let key in colLabel){
          //初始化res，计算label的宽度，24为单元格左右padding和为24px
          res[key] = {
            label: colLabel[key],
            width: context.measureText(colLabel[key]).width + 24
          };
        }
        //遍历表格数据
        for(let i = 0; i< tableData.list.length; i++){
          for(let key in colLabel){
            const curContent = tableData.list[i][key] + '';
            const curWidth = context.measureText(curContent).width + 24;
            if(curWidth > res[key].width){
              res[key].width = curWidth;
            }
          }
        }
        console.log(res);
        return res;
      })
    }
    const colLabel = {
      workDate: '班组',
      userNo: '工号',
      date: '生产日期',
      isQ: '是否质检',
    };
    const colObj = calColWidth(colLabel, productTableData);

————————————————
参考链接：https://blog.csdn.net/luoyumeiluoyumei/article/details/125853152