ElementUI中的el-table解决宽度问题 - 根据内容自动撑开

        在使用element-ui中，会发现表格组件el-table在未指定宽度情况下，会自动计算并给表格宽度赋值。但实际开发中，有时需要根据内容实际长度自动撑开显示，由内容的多少而决定表格的宽度，而不是默认宽度为100%。在默认情况下表格宽度为100%显示，并且列项未指定宽度情况下，剩余部分会平均分配宽度，如下图：

图1-默认情况宽度为100%

        本案例实际需求如下图所示，由内容自动撑开显示。

图2-根据内容自动撑开

一、演示页面

        首先创建Vue2项目，并新建演示页面，页面代码如下：

<template><div><el-table size="mini" border :data="tableData"><el-table-column type="index" label="序号" width="50px"></el-table-column><el-table-column label="名称" prop="name"></el-table-column><el-table-column label="内容" prop="content"></el-table-column><el-table-column label="图片" prop="thumb"><template slot-scope="scope"><div class="thumb"><img v-if="scope.row.thumb" :src="scope.row.thumb" class="img" /></div></template></el-table-column><el-table-column label="创建时间" prop="createtime"></el-table-column><el-table-column label="更新时间" prop="updatetime"></el-table-column></el-table></div>
</template><script>
import AutoTable from './autoTable'
export default {data(){return {tableData: [{name: "Angular", content: "This is Angular Javascript", thumb: require("@/assets/angular.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "VueJs", content: "This is Vue Javascript", thumb: require("@/assets/logo.png"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "NuxtJs", content: "This is Nuxt Javascript", thumb: require("@/assets/nuxtjs.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "React", content: "This is React Javascript", thumb: require("@/assets/react.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "Dog", content: "This is Dog Javascript", thumb: require("@/assets/dog.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"}]}}
}
</script><style lang="less" scoped>
.thumb{position: relative;img{ display: block; }.img{width: 30px;}.hover{display: none;width: 200px;position: absolute;left: 35px;top: 0;z-index: 1000;}&:hover{.hover{ display: block; }}
}
</style>

        以上代码创建好后，显示为“图1”中的效果。

二、样式调整

        如下图所示，element-ui中默认表格样式.cell为块级元素，为了能获取到内容真实的宽度，这里需要将其修改为行内块，这样就能获取到内容的宽度了。

        这里使用的是less预编译器，样式代码如下：

<style lang="less" scoped>
// 略.../deep/ .el-table .cell{ display: inline-block; }
/deep/ .el-table th.el-table__cell>.cell{ display: inline-block; width: auto; }
</style>

        如上图，样式内容添加后，选择元素则是按内容实际宽度区域进行显示。

三、directives中定义钩子函数

        Vue.directive构子函数对于组件中元素的改造是非常方便的，此时需要添加一个可以自动处理表格宽度的自定义指令，用于统一处理项目中需要根据内容自动撑开的表格。

        对于Vue.directive介绍之前一篇已介绍过，不清楚朋友可以前去了解一下，地址：Element-UI - 解决el-table中图片悬浮被遮挡问题_vuetable的图片放大后总是浮于文字下方-CSDN博客

        由于本人项目将表格组件进行了封装，所以这里使用局部自定义指令方法，如需全局处理可以将其功能移至全局文件中定义。

        代码如下：

export default {data(){return {tableData: [{name: "Angular", content: "This is Angular Javascript", thumb: require("@/assets/angular.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "VueJs", content: "This is Vue Javascript", thumb: require("@/assets/logo.png"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "NuxtJs", content: "This is Nuxt Javascript", thumb: require("@/assets/nuxtjs.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "React", content: "This is React Javascript", thumb: require("@/assets/react.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "Dog", content: "This is Dog Javascript", thumb: require("@/assets/dog.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"}]}},directives: {// 自定义v-autotableautotable: {inserted: (el, binding) =>  {}}},
}

        注意：自定义指令中inserted钩子函数是在被绑定元素插入父节点时调用，只执行一次。

四、定义AutoTable类

        定义AutoTable类，用于获取每列内容的实际宽度，并通过获取每列中最大的内容宽度计算出表格的宽。
       代码如下：

/*** 定义类 - 自定义表格宽度*/
class AutoTable{constructor(){this.timerHandle = null;        //计时器手柄}// 开始重新计算表格宽度start(el, binding){}
}
export default AutoTable;

        本类计时器是用于延迟获取内容部分DOM，当内容读取到后通过或满足某些条件后，通过this.timerHandle进行清除计时器。

五、修改表格宽度

        如下图可见，element-ui中的表格组件，是分头部标题部分和内容部分。所以要分两部分获取，先获取头部对应列内容的宽度，再获取内容部分的列中所有内容的宽度，合并到一个数组中，筛选出每列中的最大宽度作为列宽。

        下面实现原理和逻辑就不作细说了，每行代码都已添加备注并说明作用，大家可以慢慢细品。代码如下：

/*** 定义类 - 修正表格宽度*/
class AutoTable{constructor(){this.timerHandle = null;        //计时器手柄}// 开始重新计算表格宽度start(el, binding){// 如果值为false， 则不进行计算处理if(!binding.value) return;const headerDOM = el.querySelector('.el-table__header-wrapper'),      // 头部DOMbodyDOM = el.querySelector('.el-table__body-wrapper');          // 内容DOM// 先清除旧计时器clearInterval(this.timerHandle);// 开始计时this.timerHandle = setInterval(() => {const tds = bodyDOM.querySelectorAll('table tbody tr'),             // 获取内容行数ths = headerDOM.querySelectorAll('table thead th .cell'),       // 获取头部列元素emptyDOM = el.querySelector('.el-table__empty-text');         // 获取空DOM节点// 如果满足条件，结束计时器if(null != emptyDOM || tds.length>0) {clearInterval(this.timerHandle);}if(tds.length == 0 && ths.length == 0)  return;// 定义变量 存储每列的宽度数据const widths = [];            // 二维数组，存储行和列数据// 获取标题中的单元格宽度ths.forEach((item, i) => widths[i] = [item.offsetWidth]);// 获取内容部分列的单元格宽度tds.forEach(trEle => {const cells = trEle.querySelectorAll('td .cell');cells.forEach((item, i) => widths[i].push(item.offsetWidth))});// 定义存储每列中最大值宽度数组const maxWidth = [];// 获取每列中宽度最大值内容widths.forEach((arr, i) => maxWidth[i] = arr.reduce((maxValue, item) => Math.max(maxValue, item), arr[0]));// 定义变量存储表格宽度（追加内填充10）const realWidth = maxWidth.reduce((total, value) => total + value, 0) + (maxWidth.length * 10);// 修改表格宽度if(realWidth>0) el.style.width = realWidth + 'px';}, 50);}
}export default AutoTable;

        页面中在el-table标签上添加v-autotable，并且引入autotable.js文件，在组件注册插入时，实例类对象并执行start()函数，代码如下：

<template><div><el-table size="mini" border :data="tableData"  v-autotable="true"><el-table-column type="index" label="序号" width="50px"></el-table-column><el-table-column label="名称" prop="name"></el-table-column><el-table-column label="内容" prop="content"></el-table-column><el-table-column label="图片" prop="thumb"><template slot-scope="scope"><div class="thumb"><img v-if="scope.row.thumb" :src="scope.row.thumb" class="img" /></div></template></el-table-column><el-table-column label="创建时间" prop="createtime"></el-table-column><el-table-column label="更新时间" prop="updatetime"></el-table-column></el-table></div>
</template><script>
import AutoTable from './autoTable'
export default {data(){return {tableData: [{name: "Angular", content: "This is Angular Javascript", thumb: require("@/assets/angular.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "VueJs", content: "This is Vue Javascript", thumb: require("@/assets/logo.png"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "NuxtJs", content: "This is Nuxt Javascript", thumb: require("@/assets/nuxtjs.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "React", content: "This is React Javascript", thumb: require("@/assets/react.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "Dog", content: "This is Dog Javascript", thumb: require("@/assets/dog.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"}]}},directives: {// 自定义悬浮v-autotableautotable: {inserted: (el, binding) =>  new AutoTable().start(el, binding),}},
}
</script>

        此时页面效果如下图，细心朋友会发现此时未指定列宽部分的列，是等宽显示并出现换行的情况，并未按每列最大实际宽度显示，这个问题下面再细讲。

六、colgroup

        在解决列宽问题前，先来了解下colgroup。< colgroup > 元素用于设置表的特定列的样式，< colgroup > 元素应该用作列规范的容器，每个组都使用 < col> 元素指定，span 属性指定获取样式的列数，style 属性指定列的样式。

注意: < colgroup > 标记必须是一个 < table > 元素的子元素，并且应该放在任何其他表元素之前，如 < head > 、 < tr > 、 < td > 等，但是如果存在的话，应该放在 < caption > 元素之后。

        在 colgroup 中允许使用的 CSS 属性的选择非常有限，合法 CSS 属性如下：

名称描述
width设置宽度
visibility是否可见
background背景样式
border边界线

        所有其他 CSS 属性对表没有影响。

七、修整每列的宽度

        如下图可见，Element-ui组件中表格的列宽，是通过colgroup > col对每列宽进行控制的；所以要控制每列的宽度，则需要将其修正为之前获取第列内容宽最大值即可。

        代码如下：

class AutoTable{// 略...// 开始重新计算表格宽度start(el, binding){// 如果值为false， 则不进行计算处理if(!binding.value) return;const headerDOM = el.querySelector('.el-table__header-wrapper'),      // 头部DOMbodyDOM = el.querySelector('.el-table__body-wrapper');          // 内容DOM// 先清除旧计时器clearInterval(this.timerHandle);// 开始计时this.timerHandle = setInterval(() => {const tds = bodyDOM.querySelectorAll('table tbody tr'),             // 获取内容行数ths = headerDOM.querySelectorAll('table thead th .cell'),       // 获取头部列元素emptyDOM = el.querySelector('.el-table__empty-text');         // 获取空DOM节点// 略...// 修改表格宽度if(realWidth>0) el.style.width = realWidth + 'px';// 获取colgroupconst headerColGroup = headerDOM.querySelectorAll('colgroup col'),bodyColGroup = bodyDOM.querySelectorAll('colgroup col');// 修改每列宽度maxWidth.forEach((val, i) => {headerColGroup[i].style.width = val + 'px';bodyColGroup[i].style.width = val + 'px';});}, 50);}
}

        通过获取表格header中的colgroup > col 和body中的colgroup > col元素，再通过将第列中最大内容宽度赋值到对应列的col上即可。当上述代码执行后，再查看col属性则发现列的值已发生改变，如下图：

        页面效果如下图，此时第列中都以最大内容宽度显示，表格宽度根据内容长度变化而改变。

八、更新宽度

        由于inserted是在元素第一次插入时执行，只调用一次，所以当表格中数据变化，就需要使用到update和componentUpdated了。这里使用componentUpdated，它是在指令所在组件的 VNode 及其子 VNode 全部更新后调用。

        代码如下：

import AutoTable from './autoTable'
export default {data(){return {tableData: [{name: "Angular", content: "This is Angular Javascript", thumb: require("@/assets/angular.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "VueJs", content: "This is Vue Javascript", thumb: require("@/assets/logo.png"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "NuxtJs", content: "This is Nuxt Javascript", thumb: require("@/assets/nuxtjs.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "React", content: "This is React Javascript", thumb: require("@/assets/react.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "Dog", content: "This is Dog Javascript", thumb: require("@/assets/dog.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"}]}},directives: {// 自定义悬浮v-autotableautotable: {inserted: (el, binding) =>  new AutoTable().start(el, binding),componentUpdated: (el, binding) =>  new AutoTable().start(el, binding)}},
}

        虽然此方法不是真正意义上根据内容宽度自动撑开的，但也达到了预期中的效果，希望对大家有所帮助。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/40101.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

监控平台zabbix对接grafana

监控平台zabbix对接grafana

目录 1.安装grafana并启动 2.浏览器访问 3.导入zabbix数据&#xff0c;对接grafana 4.如何导入模板 5.使用zabbix监控nginx并发量连接数 5.1 修改nginx配置 5.2 编写监控数据脚本 5.3 设置键值 5.4 在zabbix web端完成自定义监控项 5.5 连接到grafana 以上一篇博客&l…
阅读更多...
使用CubeIDE调试项目现stm32 no source available for “main() at 0x800337c：

使用CubeIDE调试项目现stm32 no source available for “main() at 0x800337c：

使用CubeIDE调试项目现stm32 no source available for "main() at 0x800337c&#xff1a; 问题描述 使用CubeIDE编译工程代码和下载都没有任何问题&#xff0c;点击Debug调试工程时&#xff0c;出现stm32 no source available for "main() at 0x800337c 原因分析&a…
阅读更多...
聊聊C++20的三向比较运算符 `＜=＞`

聊聊C++20的三向比较运算符 `＜=＞`

C20标准引入了许多新特性&#xff0c;其中之一是三向比较运算符 <>&#xff0c;也被称为太空船运算符。这个新运算符为C程序员提供了一种全新的比较对象的方式&#xff0c;它能有效简化比较逻辑&#xff0c;避免编写多个比较运算符重载的情况。 为什么需要三向比较运算符…
阅读更多...
VirtualBox Ubuntu Sever配置双网卡

VirtualBox Ubuntu Sever配置双网卡

Ubuntu 版本&#xff1a;Ubuntu Server 2404 vitrualBox 网卡配置&#xff1a; 如上配置后&#xff0c;ifconfig 只能看到 网卡1 应用了。要应用 网卡2 需要更改文件 /etc/netplan/50-cloud-init.yaml&#xff08;不同的ubuntu版本这个文件名可能不同&#xff09; 首先 ifcon…
阅读更多...
6.BeanFactory处理器Bean处理器

6.BeanFactory处理器Bean处理器

BeanFactoryPostProcessor BeanFactoryProcessor是Bean工厂处理器&#xff0c;对beanFactory的进行扩展&#xff0c;可以解析Configuration Bean注解。 主要功能是对BeanFactory的补充。 //获取所有bean工厂的处理器<Bean名字&#xff0c;bean工厂处理器>Map<Strin…
阅读更多...
Simulink中的S函数深入解析

Simulink中的S函数深入解析

Simulink中的S函数深入解析 在Simulink环境中&#xff0c;S函数&#xff08;Simulink Functions&#xff09;扮演着至关重要的角色&#xff0c;它们允许用户将自定义算法和行为集成到Simulink模型中。本文将详细探讨S函数的定义、应用和编写方法&#xff0c;以及在模型中如何利…
阅读更多...
Android设备信息（DevInfo）

Android设备信息（DevInfo）

软件介绍 设备信息&#xff08;DevInfo&#xff09;一款评分非常不错的手机硬件及各种信息检测应用&#xff0c;安卓设备硬件检测工具。可以全面查看手机的各种信息、包括&#xff1a;Android系统版本的详细信息、芯片CPU处理器的详细信息、全球卫星定位、测试功能、硬件温度、…
阅读更多...
Python爬虫技术及其原理探秘

Python爬虫技术及其原理探秘

导言 随着互联网的发展&#xff0c;大量的数据被存储在网络上&#xff0c;而我们需要从中获取有用的信息。Python作为一种功能强大且易于学习的编程语言&#xff0c;被广泛用于网络爬虫的开发。本文将详细介绍Python爬虫所需的技术及其原理&#xff0c;并提供相关的代码案例。…
阅读更多...
c++高阶-1-模板

c++高阶-1-模板

文章目录 模板一、模板基本语法二、函数模板1.基本语法2.函数模板注意事项3.普通函数和函数模板区别4.普通函数和函数模板调用规则 三、类模板1.基本语法2.类模板和函数模板的区别3.类模板中成员函数调用时机4.类模板对象做函数参数5.类模板与继承6.成员函数的类外实现 模板 一…
阅读更多...
Ansys Zemax｜场曲跟畸变图的前世今生

Ansys Zemax｜场曲跟畸变图的前世今生

实现 OpticStudio通过在X和Y方向&#xff08;弧矢和子午方向&#xff09;的傍轴光线追踪确定近轴图像平面的Z坐标&#xff0c;并测量该近轴焦平面与系统图像平面的Z坐标之间的距离。 切向数据是沿Z轴从图像平面到近轴图像平面在切向&#xff08;YZ&#xff09;平面测量的距离…
阅读更多...
Qt Creator配置以及使用Git

Qt Creator配置以及使用Git

Qt Creator配置以及使用Git 引言一、Qt Creator配置git二、Qt Creator使用git2.1 创建git仓库 or git项目导入Qt2.2 配置远端&#xff0c;拉代码 or 上传代码2.3 查看更改2.4 更多细节可参考官方文档 三、参考的博客以及文档 引言 Qt Creator配置Git之后&#xff0c;可以看作是…
阅读更多...
【AIGC】DiffuToon:稳定的视频卡通化技术方案

【AIGC】DiffuToon:稳定的视频卡通化技术方案

论文&#xff1a;https://arxiv.org/pdf/2401.16224 github&#xff1a;https://github.com/modelscope/DiffSynth-Studio/tree/main/examples/Diffutoon 网络结构 两个主要分支&#xff1a;主要的卡通化管线和编辑分支 重要技术 使用了fastblend(无需模型的视频帧之间的平滑…
阅读更多...
动态规划解决0/1背包问题详解

动态规划解决0/1背包问题详解

一、引言 在日常生活中，我们经常面临各种选择和决策。有些决策涉及到资源的有限性和选择的最优性，这就需要我们运用一些算法来帮助我们做出最佳的选择。0/1背包问题就是这样一个经典的优化问题，它要求我们在给定的背包容量和物品集合中，选择出总价值最大的物品组合。本文将…
阅读更多...
不同操作系统下的换行符

不同操作系统下的换行符

1. 关键字2. 换行符的比较3. ASCII码4. 修改换行符 4.1. VSCode 5. 参考文档 1. 关键字 CR LF CRLF 换行符 2. 换行符的比较 英文全称英文缩写中文含义转义字符ASCII码值操作系统Carriage ReturnCR回车\r13MacIntosh&#xff08;早期的Mac&#xff09;LinefeedLF换行/新行\…
阅读更多...
C++程序演示如何使用类和对象进行简单的面向对象编程。

C++程序演示如何使用类和对象进行简单的面向对象编程。

下面是一个简单的C程序示例&#xff0c;展示了如何使用类和对象进行面向对象编程。这个示例定义了一个名为Person的类&#xff0c;它包含私有成员变量&#xff08;姓名和年龄&#xff09;以及公共成员函数&#xff08;用于设置和获取这些成员变量的值&#xff09;。然后&#x…
阅读更多...
【C语言】指针经典例题

【C语言】指针经典例题

题1&#xff1a; #include <stdio.h>int main() {int a[5] { 1, 2, 3, 4, 5 };int* ptr (int*)(&a 1);printf("%d,%d", *(a 1), *(ptr - 1));return 0; } //程序的结果是什么&#xff1f; 解答如下&#xff1a; 题2&#xff1a; #include <std…
阅读更多...
提取含日期字符串并格式化输出

提取含日期字符串并格式化输出

背景 OCR识别的字符串中&#xff0c;日期类型存在字符串中&#xff0c;需要提取出来&#xff0c;并格式化 环境以及依赖package NStudyPy0.0.12 NStudyPy 工具包 , 一个有用的工具包&#xff0c;可以简化开发流程&#xff0c;详细介绍可以参考 NStudyPy 本教程使用 python 3.10…
阅读更多...
Coze终于顶不住了？开始收费了

Coze终于顶不住了？开始收费了

&#x1f914;各位老铁都知道&#xff0c;之前Coze以免费出圈&#xff0c;香碰碰&#xff0c;字节一个月几个亿补贴用户。现在终于顶不住了&#xff0c;开始收费了&#xff01; 我们来看看具体情况吧&#xff01; &#x1f4b8;收费情况一览 目前国内版本还没有开始收费&#x…
阅读更多...
VisActor vs ECharts: 哪个更适合你的数据可视化需求？

VisActor vs ECharts: 哪个更适合你的数据可视化需求？

VisActor vs ECharts: 哪个更适合你的数据可视化需求&#xff1f; 在当今数据驱动的世界里&#xff0c;选择合适的数据可视化工具是至关重要的。ECharts作为广受欢迎的可视化库&#xff0c;已经在行业内拥有了长久的历史和广泛的用户基础。然而&#xff0c;VisActor作为新兴的…
阅读更多...
企业该如何选择工时管理工具？

企业该如何选择工时管理工具？

在数字化时代&#xff0c;企业的管理效率直接关系到其市场竞争力。工时管理作为企业管理的重要一环&#xff0c;不仅关乎员工的工作效率&#xff0c;还直接影响到企业的成本控制和决策质量。那么&#xff0c;面对市场上琳琅满目的工时管理工具&#xff0c;企业应该如何做出明智…
阅读更多...
最新文章

Copyright @ 2022~2023