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 小时前
【开题答辩过程】以《基于Android的出租车运行监测系统设计与实现》为例,不知道这个选题怎么做的,不知道这个选题怎么开题答辩的可以进来看看
java·后端·vue
一只小阿乐8 小时前
前端vue3 web端中实现拖拽功能实现列表排序
前端·vue.js·elementui·vue3·前端拖拽
苏打水com11 小时前
第十五篇:Day43-45 前端性能优化进阶——从“可用”到“极致”(对标职场“高并发场景优化”需求)
前端·css·vue·html·js
半桶水专家12 小时前
vue3事件处理详解
vue
方安乐1 天前
vue3 el-select懒加载以及自定义指令
javascript·vue.js·elementui
IT教程资源C1 天前
(N_122)基于springboot,vue网上订餐系统
mysql·vue·前后端分离·网上订餐系统·springboot网上订餐
星光一影2 天前
美容/心理咨询/问诊/法律咨询/牙医预约/线上线下预约/牙医行业通用医疗预约咨询小程序
mysql·小程序·vue·php·uniapp
yuyu_03042 天前
SOHE智能厨余垃圾处理系统
java·vue
哆啦A梦15882 天前
商城后台管理系统 02 添加规格参数-动态表单
javascript·vue.js·elementui
哆啦A梦15882 天前
商城后台管理系统 03 规格参数配置
javascript·vue.js·elementui