el-table-column 表格列自适应宽度的组件封装说明

已于 2024-04-30 17:18:53 修改
阅读量1.2k 收藏 4
点赞数 9
文章标签： vue elementui 开发技巧
于 2024-04-27 10:26:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24504591/article/details/138243895
版权

针对组件业务上的需求，需要给 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、实际表格的效果图：
在这里插入图片描述

IT码农-爱吃辣条
关注
改变el-table宽度
12-12
vue+element 设置页面表格，el-table拉动每列的宽度，并保存到localStorage里
el-table中表格宽度设置
wjs_007的博客
08-01 2万+
大家好，我是小白学编程。最近在工作中遇到一个功能，页面上有表格展示，其实是一个再很简单不过的功能实现了，但是，有时候会遇到尴尬的情况，就是列数量比较尴尬，差不多可以拉伸整屏；差不多会在右侧流出点空白；差不多刚好多出一块，要么出现横向滚动条，要么某一列比较挤。像这种问题，也是很常见的，而且，在不同分辨率或不同放大倍数的电脑上展示时会出现不同的结果。根据自己遇到的情况和处理的方式，总结了一下几种处理方式。
el-dialog中el-table列宽调整 自动适应 以及 固定宽度
最新发布
qq_40221737的博客
09-14 255
在标签<el-table-column prop="pin" label="" width="50%" > 中，的现象如下图，el-table能够自适应屏幕缩放的同时，还能。：设置了el-table每一列的宽度后，不会自动缩放了。method--->控制单元格样式的。
elementui的el-table根据列内容长度自适应调整列宽
树上骑个猴的博客
08-06 1万+
应用： <el-table-column prop="paperNumber" :width="flexColumnWidth('paperNumber',viceTableData)" label="单号" align="center" /> 在methods{ }里写声明函数: flexColumnWidth(str,tableData,flag='max') { // str为该列的字段名(传字符串);tableData为该表格的数据
el-table-column 表格列宽度根据内容自适应
xiaoyuer_2020的博客
08-23 2万+
问题 el-table 对于动态获取数据的表格，希望单元格内容不换行，就要设定足够的宽度，el-table-column 是支持设置固定宽度的，但是，由于数据不确定，所以无法预设宽度，怎么解决呢？ 解决方案 可以根据实际渲染后的 DOM 元素宽度动态计算内容宽度就能设置列的宽度。 具体做法 通过查看渲染后的 DOM 元素发现，el-table 的表头和内容分别用了一个原生table，通过colgroup设置每列的宽度。就从这里入手，col的name属性值和对应的 td 的class值是一致的，这样就可以遍历
Element UI 使用 table 组件设置 el-table-column 宽度width为百分比无效的问题解决方案
热门推荐
XH_jing的博客
09-08 2万+
问题： 使用 Element el-table 组件时，给列 el-table-column 设置百分比%宽度无效( width="30%" ) 解决： Vue中要将 el-table-column 的宽度设置成百分比的话，不能通过设置 width来实现，而是要设置 min-width，并且每一列都必须设置 min-width。 原因： el-table 组件会被 vue 解析成 html，Vue直接把百分号去掉把数值当做列宽来呈现，所以，width 设置百分比的值直接被解析去掉百分号% 变成 px 了。
el-table-column中设置width和min-width注意点
Jasonsanghb的博客
02-18 2万+
1.el-table-column不设置width与minwidth,每一列自适应，宽度一致 2.el-table-column设置width=30%，无效。会被当成width=30px 3.el-table-column设置min-width="30"或者30%，每一列都设置min-width才能实现每一列的百分比配置 4.el-table-column同时设置min-width和width后，该列表格就会按照width来设置，相当于width就是一个最大宽度 ...
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
ElementUI中的el-table元素提供了丰富的接口，允许开发者快速构建表格。为了实现自适应高度，你需要在el-table元素上定义height属性。例如： ```html <el-table :data="tableData" height="250" border style=...
基于ElementUI二次封装的支持自适应列宽的tablecolumn列组件
08-10
本项目"基于ElementUI二次封装的支持自适应列宽的table-column列组件"正是针对Element-UI的table组件进行了一次深度定制，以解决在数据展示过程中列宽自动适应的问题。 Element-UI的table组件在默认情况下，列宽...
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
首先，ElementUI的`el-table`组件通常通过`<el-table-column>`标签来定义每一列的属性，如`prop`、`label`和`width`等。例如，以下是一个静态的表格列定义： ```html <el-table :data="tableData" style="width: ...
el-table表格宽度自适应设置
Fansr_的博客
04-28 5684
【代码】【无标题】
[elementUI] vue el-table 自适应表格内容宽度
qq_14993591的博客
02-10 5752
由于表头和列是分开渲染的，通过el-table 设置fit属性，只能撑开表头，但是没有办法根据列的内容去适应宽度。网上找了一些使用根据表格内容计算表头宽度的文章，记个笔记。 代码逻辑是通过vue 的watch 监控表格的数据data，计算每列的内容和表头的最大宽度，计算的时候把表格内容使用span标签包裹，然后计算span标签的宽度width：px，然后再加上表格的内边距， 就得到了列的最大宽度. <el-table :data="tableData" v-loading="loading" st
动态设置el-table操作列的宽度自适应
宁静致远
11-05 2万+
el-table动态操作列宽度自适应设置
elementUI 表格宽度自适应、不换行
luoyumei的博客
07-18 1万+
el-table设置table-layout='auto canvas动态计算el-table-column宽度 列宽按内容最大宽度，不换行
关于el-table表格设置el-table-column宽度的问题
weixin_40538702的博客
12-07 9932
场景： 使用js-xlsx插件实现前端导出EXCEL表格。js-xlsx前端下载表格原理：DOM元素显示什么，下载的EXCEL表格内容即为显示的内容。 当前有一需求：后端返回的数据结构中，包含name以及display_name两个属性。要求显示display_name，但下载的EXCEL表格中同时显示name和display_name两个属性的内容。 解决： 基于js-xlsx下载原理，要想下载的表格中同时包含name和display_name两个属性，DOM中必须都要...
el-table自适应调整列宽，表格宽度
梁白开的博客
07-19 7837
第二步给定义计算列宽的计算方法。这一步借用一个大佬的写法，
【vue项目】设置el-table-column的宽度
咕噜
02-24 5697
【参考：】 https://www.cnblogs.com/younghxp/p/13330461.html 【方法：】 min-width="20%" 如： <el-table-column align= "center" label="发布者" prop="operatorwid" min-width="20%"></el-table-column>
el-table-column循环创建表格时设置列宽
yigeboke的博客
07-08 2994
el-table-column循环时设置列宽
表格 el-table-column 宽度自适应
weixin_63832468的博客
05-31 1439
背景：在使用表格的时候，发现如果用户只有一个按钮权限，这一列会留出很多空白的地方，需要去掉这些空白的地方，同时也要按钮不要换行，这种情况可以使用宽度自适应解决。这个方法也适用于文本。下面分三步实现，用的是 vue3 语法实现的，vue2 的需要调整一下，代码不多，就只贴图片了。
el-table-column 表格根据内容自适应宽度
05-27
你可以将表格的宽度设置为100%，然后再设置 el-table-column 的 min-width 和 max-width 属性，让表格的列宽根据内容自适应。你也可以使用 column-width 属性设置列宽，同时通过 white-space 属性控制单元格内容的换行和溢出效果。如果你使用了固定列宽，可以通过设置 el-table-column 的 resizable 属性为 true，让用户可以通过拖拽表格列边缘来调整列宽。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值