vue el-table 自適應表格內容寬度

由於表頭和列是分開渲染的，通過el-table 設置fit屬性，只能撐開表頭，但是沒有辦法根據列的內容去適應寬度。網上找了一些使用根據表格內容計算表頭寬度的文章，記個筆記。

代碼邏輯是通過vue  的watch 監控表格的數據data，計算每列的內容和表頭的最大寬度，計算的時候把表格內容使用span標簽包裹，然后計算span標簽的寬度width：px，然后再加上表格的內邊距，

就得到了列的最大寬度.

前端

<el-table :key="key" :data="data"  v-loading="loading" style="width: 100%;" >
      <el-table-column v-for="fruit in formThead"
                   :key="fruit.prop"
                   :label="fruit.label"
                   :width="fruit.width"  <!-- 設置寬度 -->
                   show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row[fruit.prop] }}
        </template>
    </el-table-column>
</el-table>

<script>
const fields = [
    {label:"ID", prop:"id"},
    {label:"資產名稱", prop:"asset_name"},
    {label:"OA工單號", prop:"oa_jon_num"},
    {label:"IP", prop:"ipaddress"},
    {label:"SN號", prop:"sn"},
    {label:"CPU(核)", prop:"cpu"},
    {label:"內存(G)", prop:"memory"},
    {label:"存儲(G)", prop:"disk"},
    {label:"資產類型", prop:"device_type_name"},
    {label:"資產狀態", prop:"device_status_name"},
    {label:"所屬環境", prop:"device_env_type_name"},
    {label:"房間", prop:"root"},
    {label:"設備用途", prop:"purpose"},
    {label:"機架位", prop:"rack_position"},
    {label:"U位", prop:"u_position"},
    {label:"所屬IDC機房", prop:"idc_name"},
    {label:"設備型號", prop:"equipment_type"},
    {label:"采購日期", prop:"purchase_date"},
    {label:"所屬系統類別", prop:"sys_name"},
    {label:"所屬二級產品線", prop:"second_name"},
    {label:"所屬物理機", prop:"parent_asset_name"},
    {label:"創建時間", prop:"create_at"}
]


export default {
    data() {
        return {
            url: "asset",
            key: 1, // table key
            formThead: fields, // 默認表頭 Default header
            data: []
        };
    },

    methods: {
        /**
        * 遍歷列的所有內容，獲取最寬一列的寬度
        * @param arr
        */
        getMaxLength (arr) {
          return arr.reduce((acc, item) => {
            if (item) {
              let calcLen = this.getTextWidth(item)
              if (acc < calcLen) {
                acc = calcLen
              }
            }
            return acc
          }, 0)
        },
        /**
         * 使用span標簽包裹內容，然后計算span的寬度 width： px
         * @param valArr
         */
        getTextWidth(str) {
          let width = 0;
          let html = document.createElement('span');
          html.innerText = str;
          html.className = 'getTextWidth';
          document.querySelector('body').appendChild(html);
          width = document.querySelector('.getTextWidth').offsetWidth;
          document.querySelector('.getTextWidth').remove();
          return width;
        }
    },

    watch: {
        /**
         * 監控表格的數據data，自動設置表格寬度
         * @param valArr
         */
        data(valArr) {
            const _this = this
            this.formThead = fields.map(function (value) {
                const arr = valArr.map(x => x[value.prop])  // 獲取每一列的所有數據
                arr.push(value.label)  // 把每列的表頭也加進去算
                value.width = _this.getMaxLength(arr) + 20 // 每列內容最大的寬度 + 表格的內間距(依據實際情況而定)
                return value
            })
        }
    }
}
</script>

后端返回的表格數據結構

[
    {
        asset_name: "交換機"
        cpu: null
        create_at: "2019-12-03"
        device_env_type_id: 1
        device_env_type_name: "准生產環境"
        device_status_id: 1
        device_status_name: "上架"
        device_type_id: 1
        device_type_name: "物理服務器"
        disk: null
        equipment_type: null
        id: 10
        idc: null
        ipaddress: null
        latest_date: null
        memory: null
        oa_jon_num: null
        parent_asset: null
        purchase_date: null
        purpose: null
        rack_position: null
        root: null
        second_business: null
        sn: null
        switch: null
        sys_type: null
    },
    ...
    ...
]