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

相关推荐
是你的小熊啊5 小时前
解决elementUi el-select 响应式不生效的问题
前端·vue.js·elementui
程序员小续8 小时前
Excel 表格和 Node.js 实现数据转换工具
前端·javascript·react.js·前端框架·vue·excel·reactjs
胖头鱼不吃鱼-9 小时前
开源低代码平台与 Vue.js
开源·vue
一个小开心呀10 小时前
点击表格的最后一行的下拉框,会出现横向滚动条
前端·vue.js·elementui
零凌林11 小时前
WEB前端将指定DOM生成图片并下载最佳实践(html2canvas)
前端·vue·html2canvas·blob·图片下载·dom转图片
Pro_er1 天前
Vue3 数据响应式原理与高效数据操作全解析
vue·前端开发
寰宇软件1 天前
PHP培训机构教务管理系统小程序源码
小程序·uni-app·vue·php
咖啡不加糖�1 天前
base64转文件流上传给后端
前端·javascript·vue
Smile_Gently2 天前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
BillKu2 天前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui