el-table操作列动态自适应设置（根据操作项个数动态设置宽度）

一、目的

• 目的：表格操作列宽度，根据操作项多少，自动调节宽度
• 背景：用el-table组件开发时，对于表格的操作列的自适应宽度是一个问题，如果不设置，操作按钮多时会有换行问题。如果设置最小宽度或宽度时，又会出现当条件不满足时，按钮显示的少，但操作列的宽度太宽，显示多余的空白。尤其对于字段较多，操作列固定情况下，现得特别浪费空间。

二、重发的原因

之前写过一个vue2版本的，但我看评论大家都说不起作用。

• 原因：操作列宽度设置后，没有刷新el-table的布局，所以导致无法响应。
• 自带方法doLayout：理论上这个方法是可以的，但可能是我本人操作的问题，试了一下并没有生效。
• 使用Key触发：在el-table上增加了:key="Math.random()"属性，让数据变化时重新刷新表格，测试有效

三、示例效果如下

四、示例代码

1、演示代码说明

• el-table版本：Element Plus Table
• vue版本：Vue3.3.4（vue3.2+）

2、代码

<template>
  <el-radio-group v-model="type">
    <el-radio :label="0">2列</el-radio>
    <el-radio :label="1">3列</el-radio>
    <el-radio :label="2">4列</el-radio>
  </el-radio-group>

  <el-table ref="eltable" :data="tableData" border style="width: 100%" :key="Math.random()">
    <el-table-column type="index" width="50" label="No" fixed> </el-table-column>
    <el-table-column prop="date" label="日期" width="150" fixed> </el-table-column>
    <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
    <el-table-column prop="province" label="省份" width="120"> </el-table-column>
    <el-table-column prop="address" label="地址" minWidth="260"> </el-table-column>
    <el-table-column prop="zip" label="邮编" minWidth="120"> </el-table-column>

    <el-table-column label="操作" fixed="right" :render-header="renderHeader">
      <template #default="scope">
        <div class="optionDiv" style="white-space: nowrap; display: inline-block">
          <el-button type="primary" size="small"> 新增 </el-button>
          <el-button type="primary" size="small"> 编辑 </el-button>
          <el-button v-if="scope.row.type == type" type="primary" size="small"> 移除 </el-button>
          <el-button v-if="scope.row.type == type && type == 2" type="primary" size="small">
            详情
          </el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const type = ref(0)

const tableData = [
  {
    date: '2016-05-03',
    name: '王小虎',
    province: '上海',
    address: '上海市普陀区金沙江路 1518 弄',
    zip: 200333,
    type: 1
  },
  {
    date: '2016-05-02',
    name: '王小虎',
    province: '上海',
    address: '上海市普陀区金沙江路 1518 弄',
    zip: 200333,
    type: 2
  },
  {
    date: '2016-05-02',
    name: '王小虎',
    province: '上海',
    address: '上海市普陀区金沙江路 1518 弄',
    zip: 200333,
    type: 2
  }
]

// 表头部重新渲染
function renderHeader({ column }) {
  // 获取操作按钮组的元素
  const opts = document.getElementsByClassName('optionDiv')
  let widthArr: any = []
  // 取操作组的最大宽度
  Array.prototype.forEach.call(opts, function (item) {
    if (item.innerText) {
      widthArr.push(item.offsetWidth)
    }
  })
  // 重新设置列标题及宽度属性
  if (widthArr.length > 0) {
    column.width = Math.max(...widthArr) + 30
    return column.label
  } else {
    column.width = 0
    return column.label
  }
}
</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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83