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

相关推荐
文阿花12 小时前
大屏地图实现方案之-高德(二)
vue·地图·高德
森林的尽头是阳光17 小时前
前端使用postman快速造数据
前端·javascript·vue·postman·造数·本地测试
文阿花2 天前
大屏实现方案之-高德
vue·地图·高德
Anesthesia丶3 天前
Vite + Svelte + shadcn-svelte 最小化 Demo+Vue3语法对比总结
vue·vite·svelte·shadcn-svelte
孟郎郎3 天前
TimeoutError: The operation was aborted due to timeout at new DOMException
ai·前端框架·npm·vue·pnpm·deepseek
lpd_lt3 天前
AI生成Spring Boot + Vue 3 + MySQL + MyBatis-Plus的项目实战
java·spring boot·vue·ai编程
来杯@Java3 天前
图书管理系统(基于springboot+vue前后端分离的项目)计算机毕业设计java
java·spring boot·spring·vue·毕业设计·mybatis·课程设计
华大哥4 天前
前后端分离实现五级行政区划树形菜单及设备查询管理
sqlite·vue·springboot
码界筑梦坊4 天前
282-基于Python的豆瓣音乐可视化分析推荐系统
开发语言·python·信息可视化·数据分析·flask·vue
chushiyunen4 天前
滑块验证(滑动验证)
vue