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

方案一

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

 <el-table :data="tableData"  table-layout='auto' class="tableAuto">
     <el-table-column prop="name" label="名称" />
 </el-table>
1
2
3

设置超出不折行

.tableAuto.el-table .cell {
  white-space: nowrap;
}
1
2
3

弊端：
1.el-table-column左侧多个列加fixed属性，左右滑动，列宽得提前计算
2.el-table设置table-layout='auto’属性并设置表格高度，表头不能固定

方案二（推荐）

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

 <el-table :data="tableData>
        <el-table-column label="名称" prop="name" :width="flexWidth('name',tableData,'名称')"/>
  </el-table :data="tableData>
1
2
3

canvas动态计算el-table-column宽度

/**
 * flexWidth
 * @param prop 每列的prop 可传''
 * @param tableData 表格数据
 * @param title 标题长内容短的，传标题  可不传
 * @param num 列中有标签等加的富余量
 * @returns 列的宽度
 * 注：prop,title有一个必传
 */
flexWidth(prop, tableData, title, num = 0) {
  if (tableData.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 < tableData.length; i++) {
      const now_temp = tableData[i][prop] + '';
      const max_temp = tableData[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 = tableData[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';
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44