el-table表头不折行_el-table表头不换行

目的：

1. el-table列表头始终不折行
2. el-table小于指定宽度 默认自适应撑开

思路：

1. 计算每列宽度，累加
2. 若最后累加的宽度大于table预设的宽度 则指定column的宽度，否则不指定（:width=“totalWidth > 1000 ? item.width : ‘’”）

html

<el-table
                    id="watermarkBox" 
                    :data="dataPreviewTableData"
                    stripe 
                >
                    <el-table-column
                        v-for="(item, index) in dataListTableHeadAll"
                        :key="index"
                        :width="totalWidth > 1000 ? item.width : ''"
                        :prop="item.columnCode"
                        :label="item.columnShowName"
                        show-overflow-tooltip
                        align="center"
                    >
                    </el-table-column>
                </el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

js

//表格头部信息
  this.totalWidth = 0
  for (let i in res.data) {
      let columnShowName = res.data[i].columnShowName;
      if (columnShowName) {
          const columnWidth = getTextWidth(columnShowName,'17px Microsoft Yahei') + 30
          this.totalWidth += columnWidth
          res.data[i].width = columnWidth
      }
  }
/**
 * @description: canvas方式计算字符串宽度
 * @param {*} text '文本内容'
 * @param {*} font '14px Microsoft Yahei' 
 * @return {*}
 */
getTextWidth(text, font = '14px Microsoft Yahei') {
    let canvas = (document.createElement("canvas"));
    let context = canvas.getContext("2d"); 
    context.font = font;
    let metrics = context.measureText(text);
    return metrics.width;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23