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

相关推荐
D_C_tyu5 天前
Vue3 + Element Plus | el-table 多级表头表格导出 Excel(含合并单元格、单元格居中)第二版
vue.js·elementui·excel
跟着珅聪学java5 天前
Element UI 的 el-input组件触发 blur事件
javascript·vue.js·elementui
Komorebi゛5 天前
【Vue + Element Plus】el-tree树结构样式改造,添加转折线
前端·javascript·vue.js·elementui
花生柿子5 天前
在elementui可横向滚动的table中,操作列有时候会透视下面的行
前端·javascript·elementui
南_山无梅落5 天前
从传统Web到API驱动:使用Django REST Framework重构智能合同审查系统
重构·django·vue·drf
敲代码的小吉米5 天前
Element Plus 表格中的复制功能使用指南
前端·javascript·elementui
PD我是你的真爱粉6 天前
API 请求封装(Axios + 拦截器 + 错误处理)
前端框架·vue
biyezuopinvip7 天前
基于Spring Boot的投资理财系统设计与实现(毕业论文)
java·spring boot·vue·毕业设计·论文·毕业论文·投资理财系统设计与实现
biyezuopinvip7 天前
基于Spring Boot的投资理财系统设计与实现(任务书)
java·spring boot·vue·毕业设计·论文·任务书·投资理财系统设计与实现
huohuopro8 天前
Vue3 Webview 转 Android 虚拟导航栏遮挡问题记录
android·vue