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

相关推荐
尚学教辅学习资料1 天前
Vue3从入门到精通: 4.5 数据持久化与同步策略深度解析
vue·数据持久化
IT毕设实战小研2 天前
Java毕业设计选题推荐 |基于SpringBoot的健身爱好线上互动与打卡社交平台系统 互动打卡小程序系统
java·开发语言·vue.js·spring boot·vue·毕业设计·课程设计
第七种黄昏3 天前
大事件项目拆解:登录访问拦截实现详解
前端框架·vue·js
进阶的小木桩3 天前
Vue 3 + Elementui + TypeScript 实现左侧菜单定位右侧内容
vue.js·elementui·typescript
har01d3 天前
在 uniapp 里使用 unocss,vue3 + vite 项目
前端·uni-app·vue·uniapp·unocss
har01d5 天前
【CSS3】录音中。。。
前端·css·vue.js·vue·vue3·css3
柯北(jvxiao)5 天前
Vue vs React 多维度剖析: 哪一个更适合大型项目?
前端·vue·react
北辰浮光5 天前
[Element-plus]动态设置组件的语言
javascript·vue.js·elementui
晓13136 天前
Vue2篇——第二章 Vue从指令修饰符到侦听器的全面解析(重点)
前端·javascript·vue
胡斌附体6 天前
elementui cascader 远程加载请求使用 选择单项等
前端·javascript·elementui·cascader·可独立选中单节点