您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

Vue3问题:如何实现El-table内容超出省略提示?第三条很少有人会

时间:2023-11-23 11:57:15  来源:今日头条  作者:程序员大澈

一、需求分析,问题描述

1、需求

一个表格,分表头、表体、表尾三部分。

当每个单元格的内容过长超出时,需要省略,用省略号代替超出的部分。

同时,当鼠标移入上去时,会在上方弹出一个小提示框,其内部可以展示完整的对应内容,当鼠标移出时,隐藏小提示框。

Vue3问题:如何实现El-table内容超出省略提示?第三条很少有人会

Vue3问题:如何实现El-table内容超出省略提示?第三条很少有人会

Vue3问题:如何实现El-table内容超出省略提示?第三条很少有人会

2、问题

  • 表头如何实现省略提示效果?
  • 表体如何实现省略提示效果?
  • 表尾如何实现省略提示效果?
  • 如何实现单行省略和多行省略?

二、解决问题,答案速览

实现代码如下,复制粘贴即可直接使用。

1、表头实现

表头实现的关键,在于在每一栏中插入表头插槽,并自定义内部的内容。

如果你有时间,具体代码分析、知识总结,可见第三部分。

1<!-- 模版代码 -->
 2<el-table-column prop="principal">
 3 <!-- 表头插槽 -->
 4 <template #header>
 5 <!-- 小提示框 -->
 6 <el-tooltip :disabled="isShowTooltip" content="Principal Repayment" placement="top">
 7 <!-- 单行省略样式、鼠标移入事件 -->
 8 <div class="singe-line" @mouseover="onMouseOver($event.target)">Principal Repayment</div>
 9 </el-tooltip>
10 </template>
11 <!-- 表体插槽 -->
12 <template #default="scope">{{ scope.row.principal }}</template>
13</el-table-column>
14
15// 逻辑代码
16// Tooltip是否禁用标识 默认禁用
17const isShowTooltip = ref(true)
18// 表格鼠标移入事件
19const onMouseOver = (target: any) => {
20 // 判断是否开启tooltip功能
21 if (target.scrollWidth > target.clientWidth) {
22 isShowTooltip.value = false;
23 } else {
24 isShowTooltip.value = true;
25 }
26}
27
28// 样式代码
29// 单行文本省略
30.singe-line {
31 text-overflow: ellipsis;
32 overflow: hidden;
33 word-break: break-all;
34 white-space: nowrap;
35 }

2、表体实现

表体实现的关键,在于在每一栏中添加show-overflow-tooltip属性,当内容过长被隐藏时显示tooltip小提示框。

如果你有时间,具体代码分析、知识总结,可见第三部分。

1<el-table-column fixed prop="date" label="No" width="60" show-overflow-tooltip>
2</el-table-column>

3、表尾实现

表尾实现的关键,在于通过获取表尾元素,为其追加一个tooltip小提示框子元素,并为其绑定指定列的内容和鼠标移入移出事件。

该实现方式为原生js实现,代码比较冗余。大澈并没有找到最优的答案,网上对此问题的描述也很少,如果看到这有最优解的朋友,感谢留言,已帮助更多其他朋友!

如果你有时间,具体代码分析、知识总结,可见第三部分。

1<!-- 模版代码 -->
 2<el-table :data="tableData" border show-summary :summary-method="getSummaries" style="width: 100%" max-height="500">
 3</el-table>
 4
 5
 6// 逻辑代码
 7// 合计数据
 8let sumsValue = [] as any
 9
 10// 表格合计列逻辑
 11const getSummaries = (param: SummaryMethodProps) => {
 12 const { columns, data } = param
 13
 14 const sums: string[] = []
 15 columns.forEach((column, index) => {
 16 // 第0列
 17 if (index === 0) {
 18 sums[index] = t('pdCalculateLoan.Total')
 19 return
 20 }
 21
 22 // 最后一列
 23 if (index === columns.length - 1) {
 24 sums[index] = ''
 25 return
 26 }
 27
 28 const values = data.map((item) => Number(item[column.property]))
 29 if (!values.every((value) => Number.isNaN(value))) {
 30 sums[index] = values.reduce((prev: any, curr: any) => {
 31 const value = Number(curr);
 32 if (!isNaN(value)) {
 33 // 合计计算
 34 return prev + curr;
 35 } else {
 36 return prev;
 37 }
 38 }, 0);
 39 } else {
 40 sums[index] = ''
 41 }
 42 })
 43
 44 // 存储合计数据
 45 sumsValue = sums
 46
 47 return sums
 48}
 49
 50// 添加表格底部文本提示
 51const handleTableFootTooltip = () => {
 52 // 加延时器,防止拿不到元素
 53 setTimeout(() => {
 54 try {
 55 // 获取表格底部元素
 56 let tableCellNodeArr = document.querySelectorAll('.el-table__footer-wrApper .el-table__footer td.el-table__cell')
 57
 58 //创建节点元素节点
 59 let tooltipOne = document.createElement('div');
 60 let tooltipTwo = document.createElement('div');
 61 let tooltipThree = document.createElement('div');
 62
 63 // 元素赋值
 64 tooltipOne.innerhtml = `${sumsValue[1]}`
 65 tooltipOne.className = 'tooltip'
 66 tooltipTwo.innerHTML = `${sumsValue[2]}`
 67 tooltipTwo.className = 'tooltip'
 68 tooltipThree.innerHTML = `${sumsValue[3]}`
 69 tooltipThree.className = 'tooltip'
 70
 71 tableCellNodeArr[1].onmouseover = () => {
 72 tooltipOne.style.display = 'block'
 73 }
 74 tableCellNodeArr[1].onmouseout = () => {
 75 tooltipOne.style.display = 'none'
 76 }
 77 tableCellNodeArr[2].onmouseover = () => {
 78 tooltipTwo.style.display = 'block'
 79 }
 80 tableCellNodeArr[2].onmouseout = () => {
 81 tooltipTwo.style.display = 'none'
 82 }
 83 tableCellNodeArr[3].onmouseover = () => {
 84 tooltipThree.style.display = 'block'
 85 }
 86 tableCellNodeArr[3].onmouseout = () => {
 87 tooltipThree.style.display = 'none'
 88 }
 89
 90 // 追加子元素
 91 tableCellNodeArr[1].append(tooltipOne)
 92 tableCellNodeArr[2].append(tooltipTwo)
 93 tableCellNodeArr[3].append(tooltipThree)
 94 } catch (error) {
 95 // 捕获错误
 96 console.log(error);
 97 }
 98 }, 500)
 99}
100
101onMounted(() => {
102 handleTableFootTooltip()
103})
104
105
106// 样式代码
107:deep .el-table__footer-wrapper {
108 overflow: visible;
109
110 // 表格底部
111 .el-table__footer {
112 td.el-table__cell {
113 position: relative;
114
115 // 单行文本超出省略
116 div {
117 text-overflow: ellipsis;
118 overflow: hidden;
119 word-break: break-all;
120 white-space: nowrap;
121 }
122
123 // 画提示框
124 .tooltip {
125 display: none;
126 width: 100%;
127 padding: 6px 0;
128 border-radius: 5px;
129 background-color: #313133;
130 text-align: center;
131 color: #fff;
132 position: absolute;
133 top: -40px;
134 left: 0;
135 overflow: visible;
136 font-size: 12px;
137 font-family: Poppins-Regular;
138
139 // 画小三角
140 &::before {
141 content: "";
142 display: block;
143 position: absolute;
144 left: 45%;
145 bottom: -16px;
146 border-width: 10px;
147 border-style: solid dashed dashed dashed; 
148 border-color: #313133 transparent transparent transparent; 
149 }
150 }
151 }
152 }
153 }

三、问题解析,知识总结

1、表头如何实现省略提示效果?

表头实现使用了Table-column的header插槽,在其内部放入Tooltip文字提示框组件,Tooltip组件的内容为需要展示的完整内容,而在Tooltip组件内部的元素,则是需要超出省略的内容。

为超出省略的内容元素添加鼠标移入事件,当目标元素的可滚动宽度,即实际宽度+隐藏宽度,大于目标元素的实际宽度时,说明内容元素已超出省略,此时Tooltip组件启用,反之Tooltip组件禁用隐藏。

Table-column的插槽说明如下:

Vue3问题:如何实现El-table内容超出省略提示?第三条很少有人会

2、表体如何实现省略提示效果?

表体实现的关键,在于在每一栏中添加show-overflow-tooltip属性,当内容过长被隐藏时显示tooltip小提示框。

show-overflow-tooltip属性加在Table上,影响的将是全部列,加在Table-column上时,影响的将是指定列,这里可以根据具体业务需求添加。

show-overflow-tooltip属性说明如下:

Vue3问题:如何实现El-table内容超出省略提示?第三条很少有人会

Vue3问题:如何实现El-table内容超出省略提示?第三条很少有人会

3、表尾如何实现省略提示效果?

表尾实现的关键,在于通过获取表尾元素,为其追加一个tooltip小提示框子元素,并为其绑定指定列的内容和鼠标移入移出事件。

在表格合计回调里,先把合计数据存到数组变量中,然后通过获取表尾元素,为其追加一个tooltip小提示框子元素,再依次将数组变量中的合计数据对应下标取出为其赋值,并通过鼠标事件和样式显示隐藏来控制其展示。

Table几个属性说明如下:

Vue3问题:如何实现El-table内容超出省略提示?第三条很少有人会

4、如何实现单行省略和多行省略?

1// 单行文本省略
 2 .singe-line {
 3 text-overflow: ellipsis; //文本超出显示省略号
 4 overflow: hidden; //文本超出隐藏
 5 white-space: nowrap; //只保留一个空白,文本不会换行
 6 }
 7
 8 // 两行文本省略
 9 .two-line {
10 display: -webkit-box; //将盒子转换为弹性盒子
11 -webkit-box-orient: vertical; //文本显示方式,默认水平
12 -webkit-line-clamp: 2; //设置显示多少行
13 text-overflow: ellipsis; //文本超出显示省略号
14 overflow: hidden; //文本超出隐藏
15 }


Tags:Vue   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
前端开始“锈化”?Vue团队开源JS打包工具:基于Rust、速度极快、尤雨溪主导
Vue 团队已正式开源Rolldown &mdash;&mdash; 基于 Rust 的 JavaScrip 打包工具。Rolldown 是使用 Rust 开发的 Rollup 替代品,它提供与 Rollup 兼容的应用程序接口和插件接口...【详细内容】
2024-03-09  Search: Vue  点击:(11)  评论:(0)  加入收藏
SpringBoot3+Vue3 开发高并发秒杀抢购系统
开发高并发秒杀抢购系统:使用SpringBoot3+Vue3的实践之旅随着互联网技术的发展,电商行业对秒杀抢购系统的需求越来越高。为了满足这种高并发、高流量的场景,我们决定使用Spring...【详细内容】
2024-01-14  Search: Vue  点击:(90)  评论:(0)  加入收藏
React与Vue性能对比:两大前端框架的性能
React和Vue是当今最流行的两个前端框架,它们在性能方面都有着出色的表现。React的加载速度:初次加载:由于React使用了虚拟DOM(Virtual DOM)技术,它可以通过比较虚拟DOM树与实际DOM...【详细内容】
2024-01-05  Search: Vue  点击:(106)  评论:(0)  加入收藏
Vue中Scope是怎么做样式隔离的?
scope样式隔离在 Vue 中,样式隔离是通过 scoped 特性实现的。当在一个组件的 <style> 标签上添加 scoped 特性时,Vue 会自动为这个样式块中的所有选择器添加一个唯一的属性,以...【详细内容】
2024-01-04  Search: Vue  点击:(80)  评论:(0)  加入收藏
vue3中 ref和 reactive的区别 ?
最近有朋友在面试过程中经常被问到这么一个问题,vue3 中的ref 和 reactive的区别在哪里,为什么 要定义两个API 一个 api不能实现 响应式更新吗??带着这个疑问 ,我们 接下来进行逐...【详细内容】
2024-01-03  Search: Vue  点击:(36)  评论:(0)  加入收藏
React18 与 Vue3 全方面对比
1. 编程风格 & 视图风格1.1 编程风格 React 语法少、难度大;Vue 语法多,难度小例如指令:Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【详细内容】
2024-01-03  Search: Vue  点击:(72)  评论:(0)  加入收藏
Vue中虚拟Dom技术,你学会了吗?
在Vue中,虚拟DOM(Virtual DOM)是一项关键的技术,它是一种用JavaScript对象模拟真实DOM结构的机制。虚拟DOM的引入旨在提高DOM操作的效率,特别是在频繁的数据变化时。1. 为什么需...【详细内容】
2023-12-26  Search: Vue  点击:(65)  评论:(0)  加入收藏
七个常用的 Vue 3 UI 组件
介绍:由于我在工作的公司中角色和职责的变化,作为后端开发人员的我在去年年底选择了 Vue.js。当我深入研究时,我发现 Vue.js 非常有趣。它不像 Angular 那样有很高的学习曲线,而...【详细内容】
2023-12-20  Search: Vue  点击:(78)  评论:(0)  加入收藏
Vue3 学习笔记,如何使用 Watch 监听数据变化
大家好,本篇文章我们继续学习和 Vue 相关的内容,今天我们归纳总结下如何使用 watch 监听组件中的数据变化,以及 computed 和 watch 的区别。什么是 watch,以及如何使用?watch 是...【详细内容】
2023-12-14  Search: Vue  点击:(163)  评论:(0)  加入收藏
Vue3 学习笔记,如何理解 Computed 计算属性
大家好,本篇文章我们继续学习和 Vue 相关的内容,今天我们归纳总结下什么是 computed 计算属性、如何使用和应用场景,以及 computed 和 Method 事件的区别和应用场景。什么是 co...【详细内容】
2023-12-11  Search: Vue  点击:(199)  评论:(0)  加入收藏
▌简易百科推荐
20k级别前端是怎么使用LocalStorage的,想知道吗?
当咱们把咱们想缓存的东西,存在localStorage、sessionStorage中,在开发过程中,确实有利于咱们的开发,咱们想看的时候也是一目了然,点击Application就可以看到。前言大家好,我是林...【详细内容】
2024-03-26  前端之神  微信公众号  Tags:前端   点击:(10)  评论:(0)  加入收藏
前端不存在了?盲测64%的人更喜欢GPT-4V的设计,杨笛一等团队新作
3 月 9 日央视的一档节目上,百度创始人、董事长兼 CEO 李彦宏指出,以后不会存在「程序员」这种职业了,因为只要会说话,人人都会具备程序员的能力。「未来的编程语言只会剩下两种...【详细内容】
2024-03-11  机器之心Pro    Tags:前端   点击:(9)  评论:(0)  加入收藏
前端开始“锈化”?Vue团队开源JS打包工具:基于Rust、速度极快、尤雨溪主导
Vue 团队已正式开源Rolldown &mdash;&mdash; 基于 Rust 的 JavaScrip 打包工具。Rolldown 是使用 Rust 开发的 Rollup 替代品,它提供与 Rollup 兼容的应用程序接口和插件接口...【详细内容】
2024-03-09  OSC开源社区    Tags:Vue   点击:(11)  评论:(0)  加入收藏
两年前端经验还不会手写Promise?
什么是promise?当我们处理异步操作时,我们经常需要进行一系列的操作,如请求数据、处理数据、渲染UI等。在过去,这些操作通常通过回调函数来处理,但是回调函数嵌套过多会导致代码...【详细内容】
2024-03-07  海燕技术栈  微信公众号  Tags:Promise   点击:(23)  评论:(0)  加入收藏
网站开发中的前端和后端开发有什么区别
前端开发和后端开发都是干什么的?有哪些区别?通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到。虽然前端开发和后端开发的工作有...【详细内容】
2024-02-21  CarryData    Tags:前端   点击:(31)  评论:(0)  加入收藏
网站程序开发中的前后端分离技术
随着互联网的快速发展和技术的不断创新,传统的网站开发模式已经难以满足日益增长的业务需求。为了提高开发效率、增强系统的可维护性和可扩展性,前后端分离技术逐渐成为了网站...【详细内容】
2024-01-31  网站建设派迪星航    Tags:前后端分离   点击:(23)  评论:(0)  加入收藏
如何优雅的实现前端国际化?
JavaScript 中每个常见问题都有许多成熟的解决方案。当然,国际化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 库可供选择,下面就来分享一些热门的前端国际化库!i18nexti18ne...【详细内容】
2024-01-17  前端充电宝  微信公众号  Tags:前端   点击:(67)  评论:(0)  加入收藏
Vue中Scope是怎么做样式隔离的?
scope样式隔离在 Vue 中,样式隔离是通过 scoped 特性实现的。当在一个组件的 <style> 标签上添加 scoped 特性时,Vue 会自动为这个样式块中的所有选择器添加一个唯一的属性,以...【详细内容】
2024-01-04  海燕技术栈  微信公众号  Tags:Vue   点击:(80)  评论:(0)  加入收藏
vue3中 ref和 reactive的区别 ?
最近有朋友在面试过程中经常被问到这么一个问题,vue3 中的ref 和 reactive的区别在哪里,为什么 要定义两个API 一个 api不能实现 响应式更新吗??带着这个疑问 ,我们 接下来进行逐...【详细内容】
2024-01-03  互联网高级架构师  今日头条  Tags:vue3   点击:(36)  评论:(0)  加入收藏
React18 与 Vue3 全方面对比
1. 编程风格 & 视图风格1.1 编程风格 React 语法少、难度大;Vue 语法多,难度小例如指令:Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【详细内容】
2024-01-03  爱做梦的程序员  今日头条  Tags:Vue3   点击:(72)  评论:(0)  加入收藏
站内最新
站内热门
站内头条