elementui表格宽度自适应

思路：计算每一列表头宽度和该列每行的宽度然后取最大值；

表格数据量过大，渲染会迟钝，建议分页

<el-table :data="item.tableValueList.records"><el-table-column v-for="it in item.tableHeadList" :key="it.name" :label="it.name":width="setWidth(it,item.tableValueList.records)"></el-table-column></el-table>...setWidth(val,data){//表头长度 测试font-size为14px 一个英文字符为7.8px 单元格有20px的padding el-table 的box-sizing为border-box 所以需要加上20pxconst labelLength = val.name.replace(/[^\x00,\xff]/g,'aa').length * 7.8+20;let dataLength = data.map(({[val.code]:code}) =>{//通过表头中的key去到valueList中对应的值计算长度，得到表格一列数据中的值的数组return code.attrValue.replace(/[^\x00,\xff]/g,'aa').length * 7.8+20})if(dataLength.length>0){//取一列中最大值，[].reduce会报错，所以需要判断>0dataLength = dataLength.reduce((prev,next)=>{return Math.max(prev,next);})}else{dataLength = 0;}//值和表头谁长返回谁return dataLength > labelLength ? dataLength : labelLength;}