由于表头和列是分开渲染的,通过el-table 设置fit属性,只能撑开表头,但是没有办法根据列的内容去适应宽度。网上找了一些使用根据表格内容计算表头宽度的文章,记个笔记。
代码逻辑是通过vue 的watch 监控表格的数据data,计算每列的内容和表头的最大宽度,计算的时候把表格内容使用span标签包裹,然后计算span标签的宽度width:px,然后再加上表格的内边距,
就得到了列的最大宽度.
前端
<el-table :key="key" :data="data" v-loading="loading" style=" 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 }, ... ... ]