快捷導(dǎo)航

Vue動(dòng)態(tài)設(shè)置el-table操作列的寬度自適應(yīng)

更新時(shí)間：2023年07月20日 17:06:09 作者：深海藍(lán)山

這篇文章主要給大家介紹了關(guān)于Vue如何動(dòng)態(tài)設(shè)置el-table操作列的寬度自適應(yīng),很多頁(yè)面都需要用到表格組件el-table,如果沒有給el-table-column指定寬度,默認(rèn)情況下會(huì)平均分配給剩余的列,需要的朋友可以參考下

一、問題

用el-table組件開發(fā)時(shí)，對(duì)于表格的操作列的自適應(yīng)寬度是一個(gè)問題，如果不設(shè)置，操作按鈕多時(shí)會(huì)有換行問題。如果設(shè)置最小寬度或?qū)挾葧r(shí)，又會(huì)出現(xiàn)當(dāng)條件不滿足時(shí)，按鈕顯示的少，但操作列的寬度太寬，顯示多余的空白。尤其對(duì)于字段較多，操作列固定情況下，現(xiàn)得特別浪費(fèi)空間。

寬度不足情況

寬度充足但條件不足情況

期望情況

操作列可以根據(jù)按鈕情況自適應(yīng)寬度，按鈕少時(shí)寬度變小，按鈕多時(shí)自動(dòng)增加寬度。

二、解決方案

網(wǎng)上查了一下對(duì)列內(nèi)容的自適應(yīng)的方案較多，但對(duì)操作列的自適應(yīng)卻沒有找到相關(guān)的方案。不過按照內(nèi)容自適應(yīng)的方案的原理，本人實(shí)現(xiàn)了一下，發(fā)現(xiàn)可以解決。

思路

通過CSS的 white-space: nowrap; display: inline-block設(shè)置內(nèi)容不換行，然后計(jì)算div的寬度來重新設(shè)置列頭屬性，
依賴屬性：

CSS:white-space: nowrap; display: inline-block
Table-column Attributes:render-header:列標(biāo)題 Label 區(qū)域渲染使用的 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"> 下發(fā) </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          address: '上海市普陀區(qū)金沙江路 1518 弄',
          zip: 200333,
          type: 1
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          address: '上海市普陀區(qū)金沙江路 1518 弄',
          zip: 200333,
          type: 2
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          address: '上海市普陀區(qū)金沙江路 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);
        }
      });
      // 重新設(shè)置列標(biāo)題及寬度屬性
      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>

最終效果

分別為兩列、三列和四列操作的展示效果

總結(jié)

到此這篇關(guān)于Vue動(dòng)態(tài)設(shè)置el-table操作列的寬度自適應(yīng)的文章就介紹到這了,更多相關(guān)el-table列寬度自適應(yīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: