Vue element-ui中表格过长内容隐藏显示的实现方式

更新时间：2022年09月20日 10:28:44 作者：溪午闻璐

在Vue项目中,使用ElementUI渲染表格数据时,如果某一个列数值长度超过列宽,会默认换行,造成显示不友好,下面这篇文章主要给大家介绍了关于Vue element-ui中表格过长内容隐藏显示的实现方式,需要的朋友可以参考下

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

总结

到此这篇关于Vue element-ui中表格过长内容隐藏显示实现的文章就介绍到这了,更多相关element-ui表格过长内容隐藏显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

在Vue中使用scoped属性实现样式隔离的原因解析
scoped是Vue的一个特殊属性,可以应用于<style>标签中的样式,这篇文章给大家介绍在Vue中,使用scoped属性为什么可以实现样式隔离,感兴趣的朋友一起看看吧
2023-12-12
vue项目的html如何引进public里面的js文件
这篇文章主要介绍了vue项目的html如何引进public里面的js文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
Vue事件处理的原理与过程详解
这篇文章主要介绍了vue事件处理原理及过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2023-03-03
vue实现用户动态权限登录的代码示例
这篇文章主要介绍了vue如何实现用户动态权限登录，文中的代码示例介绍的非常详细，对大家学习vue有一定的帮助，需要的朋友可以参考阅读
2023-05-05
Vue组件之间的通信方式(推荐!)
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的,这篇文章主要给大家介绍了关于Vue组件之间的通信方式,需要的朋友可以参考下
2022-06-06
Element Card 卡片的具体使用
这篇文章主要介绍了Element Card 卡片的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
基于Vue sessionStorage实现保留搜索框搜索内容
这篇文章主要介绍了基于Vue sessionStorage实现保留搜索框搜索内容,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-06-06
利用Vue3实现可复制表格的方法详解
表格是前端非常常用的一个控件，本文主要为大家介绍了Vue3如何实现一个简易的可以复制的表格，文中的示例代码讲解详细，需要的可以参考一下
2022-12-12
在vue中nextTick用法及nextTick 的原理是什么
这篇文章主要介绍了在vue中nextTick用法及nextTick 的原理是什么,Vue.js 是一个流行的前端框架，它提供了一种响应式的数据绑定机制，使得页面的数据与页面的 UI 组件之间能够自动同步，需要的朋友可以参考下
2023-04-04
vue打包使用Nginx代理解决跨域问题
这篇文章主要介绍了vue打包使用Nginx代理解决跨域问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08