您现在的位置是:首页 > Javascript
当前栏目
Vue:element-ui中表格过长内容隐藏显示
2023-03-31 10:42:28 时间
一、el-table表格
在使用VUE显示后台数据时,经常会遇到数据过长,显示出来的效果很难看,如下图所示:
上图中,红框框出的内容由于长度过长,占据了三行空间,如果内容更多的话,占据行数就更多了,表格中列数一多的话,显出出来的效果会很难看。
为了解决上述问题,我们可以利用<el-table-column>组件提供的一个属性::show-overflow-tooltip='true' 添加该属性,会将过长的部分内容隐藏起来,并且在鼠标悬停在内容上面时,会以悬浮框的形式将所有数据显示出来,代码如下所示:
<el-table-column
label="DeviceId"
prop="deviceId"
:show-overflow-tooltip='true'>
</el-table-column>
效果如下图所示:
从上图效果中,可以看出,框出的内容在显示时将其过长的部分以省略号...代替,而当鼠标放置到内容上面时,包括隐藏数据的所有数据以悬浮框的形式显示出来。
这种方法即达到了使页面美观,也达到了数据显示的的目的,可以在前端使用表格显示数据的时候采用。
但是,这种方法有一个很大的弊端,即鼠标悬停显示的数据无法复制。为了解决这个问题,可以在表格中采用Popover 弹出框组件。
二、Popover 弹出框
element-ui中,表格使用Popover 弹出框组件代码如下:
<!-- <el-table-column label="DeviceId" prop="deviceId" :show-overflow-tooltip='true'></el-table-column> -->
<el-table-column label="deviceId" prop="deviceId">
<template slot-scope='scope'>
<el-popover
placement="top-start"
width="400"
trigger="hover">
<span>{{scope.row.deviceId}}</span>
<span slot="reference">{{scope.row.deviceId.substr(1,20) + '...'}}</span>
</el-popover>
</template>
</el-table-column>
最终效果如下所示:
从上图可以看出,使用Popover 弹出框组件,我们不仅在鼠标指向内容时,在悬浮框中将所有内容显示出来,鼠标还可以一如到悬浮框,复制自己想要的内容。
相关文章
- 谈一谈我对React Hooks的理解
- 前端:使用纯css实现超实用的图标库(附源码)
- jQuery中的常用到的三十九个技巧
- 巧妙使用 CSS 控制动画行进
- 使用这 6个Vue加载动画库来减少我们网站的跳出率
- 快速构建一个用本地网络发送和接收消息的APP
- 推荐 9 个 Node.js 学习、进阶、Debugging 分析、实战的重磅开源项目
- JavaScript 开发者需要了解的15个 DevTools 技巧
- JavaScript删除对象的某个属性的方法
- 说说提高Webpack的构建速度的手段有哪些?
- 官宣|Google Developers中国网站发布!
- 基于Egg.js定制业务Web框架(一) - 框架扩展
- 一篇带给你Swift 进阶: 泛型
- 前端原型链污染漏洞竟可以拿下服务器shell?
- NodeJS和C++之间的类型转换
- 小技巧!CSS 提取图片主题色功能探索
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 前端百题斩之Typeof和Instanceof
- 顺序查找和二叉查找详解
- 一道字节笔试题,没有想到考察的是....