Element ui table表格内容超出隐藏显示省略号问题

更新时间：2023年11月17日 09:46:21 作者：阿wei程序媛

这篇文章主要介绍了Element ui table表格内容超出隐藏显示省略号问题,具有很好的参考价值,希望对大家有所帮助,

Element ui table表格内容超出隐藏显示省略号

element ui官方文档上面有个参数

:show-overflow-tooltip="true"

给el-table-column设置:show-overflow-tooltip="true"属性可以使单元格超出的内容被隐藏显示为...

当鼠标移入时单元格的上方会弹出一个tooltip来显示单元格的所有内容。

<el-table v-loading="loading" :data="collectionList" @selection-change="handleSelectionChange">
     <el-table-column label="藏品名称" align="center" prop="worksName" :show-overflow- 
      tooltip="true" />
</el-table>

效果图：

有时候因为table中的文字非常的多，而show-overflow-tooltip默认是把折叠的内容全部折叠为一行。

那么当文字多的时候视觉体验就会变得比较差。

我们可以对此进行样式修改。

tips的class名为.el-tooltip__popper，我们可以写css样式，但需要注意的是，在样式里面写scoped，.el-tooltip__popper样式无效，但是去掉scoped又有可能影响到其他页面的样式

解决办法

就是，再写一个<style></style>样式。

<style>
.el-tooltip__popper {
  max-width: 60px;
}
</style>

效果图：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue实现移动端日历的示例代码
工作中遇到一个需求是根据日历查看某一天/某一周/某一月的睡眠报告，但是找了好多日历组件都不是很符合需求，只好自己手写一个日历组件，顺便记录一下，希望对大家有所帮助
2023-04-04
vue实现拖拽与排序功能的示例代码
在Web应用程序中,实现拖拽和排序功能是非常常见的需求,本文为大家介绍了如何使用Vue来实现一个简单但功能强大的拖拽与排序功能,感兴趣的小伙伴可以参考下
2023-10-10
Vue父子组件通信全面详细介绍
这篇文章主要介绍了React中父子组件通信详解，在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-10-10
vue前端crud(页面布局、新增及vue中反向代理)图文详解
Vue.js是一款轻量级的前端框架,具有响应式的数据绑定和组件化的开发方式,适合构建用户界面,这篇文章主要介绍了vue前端crud(页面布局、新增及vue中反向代理)的相关资料,需要的朋友可以参考下
2026-02-02
vue安装遇到的5个报错及解决方法
在本篇文章里小编给大家分享了关于vue安装遇到的5个报错小结以及解决方法，需要的朋友们参考下。
2019-06-06
vue分片上传视频并转换为m3u8文件播放的实现示例
前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟后端配合做了一个切片的功能,本文主要介绍了vue分片上传视频并转换为m3u8文件播放的实现示例,感兴趣的可以了解一下
2023-11-11
Echart图表在项目中的前后端使用详解
图表在我们的项目中可以帮我们很明确的看到我们想要看到的数据，本文将主要介绍Echart图表在项目中前后端使用的详细教程，感兴趣的同学可以学习一下
2021-11-11
vue实现的网易云音乐在线播放和下载功能案例
这篇文章主要介绍了vue实现的网易云音乐在线播放和下载功能,结合具体实例形式分析了网易云音乐相关接口调用与操作技巧,需要的朋友可以参考下
2019-02-02
Vue之过滤器详解
这篇文章主要为大家介绍了Vue之过滤器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助,希望能够给你带来帮助
2021-11-11
Vue项目返回页面保持上次滚动状态方式
这篇文章主要介绍了Vue项目返回页面保持上次滚动状态方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-04-04