Dynamically set the width of the el-table operation column to adapt

1. Problems

When developing with the el-table component, the adaptive width of the operation column of the table is a problem. If it is not set, there will be a line break problem when there are many operation buttons. If the minimum width or width is set, when the condition is not met, the buttons are displayed less, but the width of the operation column is too wide, and extra blanks are displayed. Especially for the case where there are many fields and the operation column is fixed, it is a waste of space.

Insufficient width

insert image description here

Sufficient width but insufficient conditions

insert image description here

Expectation

The width of the operation column can be adapted according to the buttons. When there are few buttons, the width becomes smaller, and when there are many buttons, the width increases automatically.
insert image description here

Two, the solution

I checked on the Internet that there are many adaptive schemes for the column content, but no relevant schemes have been found for the adaptive operation column. However, according to the principle of the content adaptive solution, I realized it and found that it can be solved.

train of thought

Set the content through CSS white-space: nowrap; display: inline-blockwithout wrapping, and then calculate the width of the div to reset the column header attribute,
dependent attribute:

CSS:white-space: nowrap; display: inline-block
Table-column Attributes:render-header:列标题 Label 区域渲染使用的 Function

code example

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" :border="true" fit>
      <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 slot-scope="scope">
          <div class="optionDiv" style="white-space: nowrap; display: inline-block">
            <el-button type="text" size="small"> 新增 </el-button>
            <el-button type="text" size="small"> 编辑 </el-button>
            <el-button v-if="scope.row.type == 2 || scope.row.type == 3" type="text" size="small"> 移除 </el-button>
            <el-button v-if="scope.row.type == 2 || scope.row.type == 3" type="text" size="small"> 详情 </el-button>
            <el-button v-if="scope.row.type == 3 || scope.row.type == 3" type="text" size="small"> 下发 </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      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: 3
        }
      ]
    };
  },
  methods: {
    
    
    // 表头部重新渲染
    renderHeader(h, {
     
      column, $index }) {
    
    
      // 获取操作按钮组的元素
      const opts = document.getElementsByClassName('optionDiv');
      let widthArr = [];
      // 取操作组的最大宽度
      Array.prototype.forEach.call(opts, function (item) {
    
    
        if (item.innerText) {
    
    
          widthArr.push(item.offsetWidth);
        }
      });
      // 重新设置列标题及宽度属性
      if (widthArr.length > 0) {
    
    
        column.width = Math.max(...widthArr) + 24;
        return h('span', column.label);
      } else {
    
    
        column.width = 0;
        return h('span', column.label);
      }
    }
  }
};
</script>

final effect

The display effect of two-column, three-column and four-column operation respectively
insert image description here