需求是这样的,之前我也写过,就是前端渲染的表格数据是动态渲染表格的行和列,
那么就必然出现了一个问题,当列超过一定的个数的时候,会出现横向滚动条,
那么怎么让表格整体看起来自然协调一些呢,老大要求表格的单元格宽度根据内容动态计算,最大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上面