el-table 操作列の幅を動的に設定して適応させます。

1. 問題点

el-tableコンポーネントで開発する場合、テーブルの操作欄の適応幅が問題となり、これを設定しないと操作ボタンが多い場合に改行問題が発生します。最小幅または幅を設定すると、条件を満たさない場合、ボタンの表示は少なくなりますが、操作欄の幅が広すぎて余分な空白が表示されます。特にフィールド数が多く、操作欄が固定されている場合はスペースの無駄になります。

幅が不十分です

ここに画像の説明を挿入

幅は十分だが条件が不十分

ここに画像の説明を挿入

期待

操作欄の幅はボタンに応じて調整でき、ボタンが少ない場合は幅が狭くなり、ボタンが多い場合は自動的に幅が広くなります。
ここに画像の説明を挿入

2、解決策

インターネットで列の内容に対する適応スキームが多数あることを確認しましたが、適応操作列については該当するスキームが見つかりませんでした。しかし、コンテンツ適応型ソリューションの原理に従って、それを実現し、解決できることがわかりました。

一連の考え

ラップせずにCSS を通じてコンテンツを設定しwhite-space: nowrap; display: inline-block、div の幅を計算して列ヘッダー属性と
依存属性をリセットします。

CSS:white-space: nowrap; display: inline-block
テーブル列の属性:render-header:列标题 Label 区域渲染使用的 Function

コード例

<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>

最終効果

2列操作、3列操作、4列操作のそれぞれの表示効果
ここに画像の説明を挿入