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

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

1、先计算数据渲染后的 el-table-column 文本宽度;

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

计算文本宽度的方法 - calcTextWidth:

计算渲染后表格每一列的最大宽度 - tableColumnWidth:

2、对于 el-table-column 组件的封装,需要比较列的宽度与表头的宽度:


在.vue 业务代码中使用:

采用混淆的模式,将 tableColumn 组件名替换 el-table-column,加上一个属性:column-width,属性值为混淆 js 的 columnWidthObj.xxx(xxx 为 prop 属性值);


3、实际表格的效果图:

相关推荐
喜陈10 小时前
解决elementui-plus使用el-table的合计功能时横向滚动条显示在了合计上方
前端·vue.js·elementui
wuaro1 天前
RBAC权限控制具体实现
前端·javascript·vue
北极糊的狐1 天前
若依项目通用套路——列表页面提前加载数据塞进下拉框待选项
javascript·vue.js·elementui
前端互助会2 天前
AILabel标注工具指南(二):禁止图片外标注
vue·ailabel
lyj1689972 天前
el-select+el-tree实现下拉树形选择
javascript·vue.js·elementui
招风的黑耳3 天前
ElementUI元件库——提升Axure原型设计效率与质量
前端·elementui·axure
YiHanXii3 天前
Axios 相关的面试题
前端·http·vue·react
申朝先生4 天前
vueRouter的hash模式跟history的区别
vue
油丶酸萝卜别吃4 天前
springBoot与ElementUI配合上传文件
spring boot·后端·elementui