el-table-column 表格列自适应宽度的组件封装说明

作者：AllinToyou | 2024-05-03 16:28:05

踩

针对组件业务上的需求，需要给 el-table-column 加上限制，需保证表头在一行展示，部分列的内容要一行展示，自适应单项列的宽度；

因列表的有些数据需要做到数值映射显示，只能等数据渲染完后，再做文本的宽度计算；

计算文本宽度的方法 - calcTextWidth：
在这里插入图片描述

计算渲染后表格每一列的最大宽度 - tableColumnWidth：
在这里插入图片描述

在这里插入图片描述

在.vue 业务代码中使用：
采用混淆的模式，将 tableColumn 组件名替换 el-table-column，加上一个属性:column-width，属性值为混淆 js 的 columnWidthObj.xxx（xxx 为 prop 属性值）；
在这里插入图片描述

3、实际表格的效果图：
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/530551