因某些需求,表格数据需要循环展示,表格宽度需要根据表头自适应,可使用getTextWidth方法
<template>
<el-table
:key="tableLoading"
:data="tableData"
v-loading="tableLoading"
>
<template v-for="(item,index) in classList">
<el-table-column v-else :key="index" align="center" :label="item.dataName" :width="getTextWidth(item.dataName)">
<template slot-scope="scope">
{{scope.row.statisticalQuantityNumberVOS[index].number}}
</template>
</el-table-column>
</template>
</template>
</el-table>
export default{
methods:{
getTextWidth(text){
const span = document.createElement('span');
span.style.visibility = 'hidden';
span.style.position = 'absolute';
span.style.top = '-9999px';
span.style.whiteSpace = 'nowrap';
span.innerText = text;
document.body.appendChild(span);
const width = span.offsetWidth+20;
document.body.removeChild(span);
if(width<80) return 80
return width;
},
}
}