根据计算字符和计算dom长度自适应列宽两位大佬的方法，找到最适合我的方法，仅供参考
原理：在表格dom元素生成前计算dom长度。
循环所有列的数据与列名，赋值给虚拟dom，获取dom长度，从而计算
测试
<template>
<div id="app">
<div
v-for="(item, index) in columns"
:ref="'cs' + item.name"
class="cs"
></div>
<el-button @click="getValue">获取</el-button>
</div>
</template>
<script>
export default {
mounted() {
this.columns.map((item) => {
let key = Object.keys(item)[0];
let value = item[key];
for (let i = 0; i < 150000; i++) {
value.push(Math.random());
}
});
console.log(this.columns);
},
data() {
return {
columns: [
{ sz: [], name: "a", lenArr: [] },
{ sz: [], name: "b", lenArr: [] },
{ sz: [], name: "c", lenArr: [] },
{ sz: [], name: "d", lenArr: [] },
{ sz: [], name: "e", lenArr: [] },
],
};
},
directives: {},
computed: {},
methods: {
getValue() {
let length = this.columns[0].sz.length;
for (let i = 0; i < length; i++) {
setTimeout(() => {
this.columns.map((item, index) => {
this.$refs[`cs${item.name}`][0].innerHTML = item.sz[i];
this.$nextTick(() => {
item.lenArr.push(
this.$refs[`cs${item.name}`][0].getBoundingClientRect().width
);
});
});
}, 0 * i);
}
setTimeout(() => {
console.log(this.columns);
});
},
},
created() {},
};
</script>
