摘要：
由于表头和列是分开渲染的，通过el-table设置fit属性，只能撑开表头，但是没有办法根据列的内容去适应宽度。网上找了一些使用根据表格内容计算表头宽度的文章，记个笔记。代码逻辑是通过vue的watch监控表格的数据data，计算每列的内容和表头的最大宽度，计算的时候把表格内容使用span标签包裹，然后计算span标签的宽度width：px，然后再加上表格的内边距，就得到了列的最大宽度.前端˂el-table-columnv-for="fruitinformThead":key="fruit.prop":label="fruit.label":width="fruit.width"˂!
由于表头和列是分开渲染的，通过el-table 设置fit属性，只能撑开表头，但是没有办法根据列的内容去适应宽度。网上找了一些使用根据表格内容计算表头宽度的文章，记个笔记。
代码逻辑是通过vue 的watch 监控表格的数据data，计算每列的内容和表头的最大宽度，计算的时候把表格内容使用span标签包裹，然后计算span标签的宽度width：px，然后再加上表格的内边距，
就得到了列的最大宽度.
前端
<el-table :key="key" :data="data" v-loading="loading" >
<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
}
}
returnacc
}, 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();
returnwidth;
}
},
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 //每列内容最大的宽度 + 表格的内间距(依据实际情况而定)
returnvalue
})
}
}
}
</script>后端返回的表格数据结构
[ { asset_name: "交换机"cpu: null create_at: "2019-12-03"device_env_type_id: 1device_env_type_name: "准生产环境"device_status_id: 1device_status_name: "上架"device_type_id: 1device_type_name: "物理服务器"disk: null equipment_type: null id: 10idc: 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 }, ... ... ]