element ui设置table自适应表格宽，不自动换行_antd vue表格滚动 宽度自适应 不换行

在我们平常开发使用element ui中的table时，会出现数据过长自动换行的结果，
如果把宽给死的情况下也不太适合，接下来提供二种方式去动态计算每个盒子的宽度。

第一种方式

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

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

// 设置超出不折行
<style>
.tableAuto.el-table .cell {
  white-space: nowrap;
}
</style>
1
2
3
4
5
6
7
8
9
10

但这种方式纯在二个问题
1.el-table-column左侧多个列加fixed属性，左右滑动，列宽得提前计算
2.el-table设置table-layout='auto’ 与 固定表头 的功能冲突，表头无法再固定

第二种方式 （推荐使用第二种方式）

第二种方式就是通过canvas动态计算el-table-column宽度，可以完美解决第一种方式的2中弊端。

<template>
  <el-table>
     <el-table-column :width="flexWidth(item.en, tableData, item.cn)"></el-table-column>
   </el-table>
</temolate>
<script>
/**
 * dynamicCalculationWidth
 * @param string | number prop 每列的prop 可传''
 * @param array tableData 表格数据
 * @param string | number title 标题长内容短的，传标题  可不传
 * @param number num 列中有标签等加的富余量
 * @returns 每列的宽度
 * 注：prop,title有一个必传
 */
 dynamicCalculationWidth(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'
    },
    </script>
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
45
46
47
48
49
50
51
52
53
54

-fs