Vue：element-ui中表格过长内容隐藏显示

2024-06-21 07:55:24

一、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-popoverplacement="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 弹出框组件，我们不仅在鼠标指向内容时，在悬浮框中将所有内容显示出来，鼠标还可以一如到悬浮框，复制自己想要的内容。

Vue：element-ui中表格过长内容隐藏显示相关推荐

在Element UI中表格根据数据动态变化显示表格的内容
需求对于Element UI里的表格,如果假设传入data的数据为数字(事实上其他的字母之类的也可)代表为表格的一些固定选项,而不是直接传入字符串,怎样实现替换.比如对于某个表格的选项,传入的数据用 ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
element ui中穿梭框等列表文字显示过长隐藏问题处理
主要记录一下element ui组件中穿梭框.table列表内容显示不全解决方式对于Transfer 穿梭框中的文字过长隐藏问题处理: 1.实现效果: 解决方式; 1. <el-row :gu ...
前端笔记-在Element UI中表格如何根据数据动态变化显示
前言实际上我需要的功能类似于前端工程中的字典.由于在前端的学习自己写代码的过程中可能不会对一个项目工程化的如此的彻底,所以这里给出了一种解决方法. 需求对于Element UI里的表格,如果假设传 ...
vue element ui合并表格（合并某列的行数据）
需求:按需合并某些列的数据自定义数据: tableData:[ { num:0, new_subject_name:"new_subject_name1", count1:&qu ...
vue表单中批量导入功能_vue实战(11)——vue+element UI实现表格数据导出Excel功能
一.应用场景按照需求导出功能分为勾选批量导出及按照查询结果导出,考虑到接口操作导出的复杂性,因此实现了js控制导出的功能导出功能截图二.安装相关依赖 cnpm install --save xl ...
web前端-Vue element UI中的el-table勾选框展示隐藏；设置默认勾选、禁用
1.el-table如果我们想新增一个勾选框,在 .vue文件中 <el-table-column type="selection" width="55" ...
vue+Element ui中使用 upload实现Excel文件上传
文章目录业务需求: 实现方式: 具体步骤: 1.引入组件: 2.data中定义: 3.methods中方法: 业务需求: 批量导入Excel文件实现方式: 使用组件upload 具体步骤: 1.引 ...
element ui中table合并相同内容单元格
一.遍历需要合并的集合,定义spanArr数组二.在table中增加事件三.调用objectSpanMethod方法,合并单元格

最新文章

热门文章