vue+element 根據內容計算單元格的寬度

需求是這樣的,之前我也寫過,就是前端渲染的表格數據是動態渲染表格的行和列,

那么就必然出現了一個問題,當列超過一定的個數的時候,會出現橫向滾動條,

那么怎么讓表格整體看起來自然協調一些呢,老大要求表格的單元格寬度根據內容動態計算,最大200px,

so 干吧

 

template代碼:

min-width要動態設置

<template v-for="(item,i) in table.titleData">
          <el-table-column
            :min-width="item.columnWidth"
            show-overflow-tooltip
            :key="i"
            v-if="item.is_show == '1'"
            :prop="item.field_code"
            :label="item.field_title"
            align="center"
          ></el-table-column>
        </template>

script代碼:

在獲取到表格數據的時候,為每個數據對象設置 columnWidth 屬性,初始值為50px,

然后在執行 tableWidthAdaptation 方法,這個方法是關鍵

if (error == 0) {
        // 遍歷title_list,將columnWidth:50px寫入每個對象中
        for(let i in title_list) {
          title_list[i].columnWidth = '50px'
        }
        this.table.groupSearchList = group_list;
        this.table.titleData = title_list;
        this.table.tables = list;
        this.table.total = count;
        this.table.currentPage = res.data.result.page; //當前頁
        setTimeout(function() {
          _this.tableWidthAdaptation();
        },100);
      }

tableWidthAdaptation() {
      let rows = this.$refs.tableData.$el.childNodes[2].childNodes[0].childNodes[1].rows;
      let arr = [];
      for (let i = 0; i < rows.length; i++) {
        for (let j = 0; j < rows[i].cells.length; j++) {
            let w = rows[i].cells[j].childNodes[0].childNodes[0].offsetWidth;
            if (!arr[j] || arr[j] < w) {
              arr[j] = this.columnWidth(w);
            }
        }
      }
      // 截取數組
      arr.splice(0,2)
      arr.splice(-1,1)
      let titleData = this.table.titleData
      titleData.forEach((item,i)=> {
        item.columnWidth = arr[i]
      })
      this.table.titleData = titleData
    },
    columnWidth(value, min = 52, max = 200) {
      value = Number(value) + 12;
      if (value < min) {
        return min + "px";
      } else if (value > max) {
        return max + "px";
      } else {
        return value + "px";
      }
    }

let rows = this.$refs.tableData.$el.childNodes[2].childNodes[0].childNodes[1].rows; 獲取到了表格的每一行數據

然后通過遍歷,得到每一個單元格的寬度 let w = rows[i].cells[j].childNodes[0].offsetWidth;

最后將值賦值到 titleData 中,頁面for循環賦值到min-width上面