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

相关推荐
麦兜*2 小时前
轮播图带详情插件、uniApp插件
前端·javascript·uni-app·vue
veminhe2 小时前
uni-app使用组件button遇到的问题
uni-app·vue
博客zhu虎康3 小时前
ElementUI 的 form 表单校验
前端·javascript·elementui
cronaldo913 小时前
研发效能DevOps: Vite 使用 Element Plus
vue.js·vue·devops
yg_小小程序员15 小时前
vue3中使用vuedraggable实现拖拽
typescript·vue
川石教育19 小时前
Vue前端开发-缓存优化
前端·javascript·vue.js·缓存·前端框架·vue·数据缓存
漫天转悠1 天前
VScode中配置ESlint+Prettier详细步骤(图文详情)
vscode·vue
落魄实习生2 天前
AI应用-本地模型实现AI生成PPT(简易版)
python·ai·vue·ppt
bpmf_fff2 天前
二九(vue2-05)、父子通信v-model、sync、ref、¥nextTick、自定义指令、具名插槽、作用域插槽、综合案例 - 商品列表
vue
CodeChampion2 天前
60.基于SSM的个人网站的设计与实现(项目 + 论文)
java·vue.js·mysql·spring·elementui·node.js·mybatis