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、实际表格的效果图:

相关推荐
一个很帅的帅哥13 小时前
实现浏览器的下拉加载功能(类似知乎)
开发语言·javascript·mysql·mongodb·node.js·vue·express
我是Superman丶13 小时前
【前端UI框架】VUE ElementUI 离线文档 可不联网打开
前端·vue.js·elementui
孟诸15 小时前
计算机专业毕设-校园新闻网站
java·vue·毕业设计·springboot·课程设计
乐~~~17 小时前
el-tabs 自适应高度
elementui·scss
Sca_杰1 天前
vue2使用npm引入依赖(例如axios),报错Module parse failed: Unexpected token解决方案
前端·javascript·vue
J总裁的小芒果2 天前
vue3-print打印eletable某一行的数据
javascript·vue.js·elementui
会有黎明吗2 天前
完整版订单超时自动取消功能
java·vue·rabbitmq
机器人迈克猫2 天前
Django_Vue3_ElementUI_Release_004_使用nginx部署
nginx·elementui·django
andy7_2 天前
多版本node管理工具nvm
vue
1234Wu2 天前
高德地图2.0 绘制、编辑多边形覆盖物(电子围栏)
前端·vue