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 }, ... ... ]