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源码解析之事件机制原理
这篇文章主要介绍了vue源码解析之事件机制原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
vue基于session和github-oauth2实现登录注册验证思路详解
通过 sessionId 可以在 session 表中获取用户的信息,此外,还利用 session 表实现了GitHub 的 OAuth2 第三方登录,本文讲解前端通过简单的方式实现一个基本的登录注册验证功能,感兴趣的朋友跟随小编一起看看吧
2024-08-08
Vue中.env、.env.development及.env.production文件说明
这篇文章主要给大家介绍了关于Vue中.env、.env.development及.env.production文件说明的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
2022-09-09
vue实现树形表格
这篇文章主要为大家详细介绍了vue实现树形表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
教你如何使用VUE组件创建SpreadJS自定义单元格
这篇文章主要介绍了使用VUE组件创建SpreadJS自定义单元格的方法，通常我们使用组件的方式是，在实例化Vue对象之前，通过Vue.component方法来注册全局的组件,文中通过实例代码给大家介绍的非常详细，需要的朋友参考下吧
2022-01-01
VUE-Table上绑定Input通过render实现双向绑定数据的示例
今天小编就为大家分享一篇VUE-Table上绑定Input通过render实现双向绑定数据的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
Vue插槽slot全部使用方法示例解析
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签，这篇文章主要介绍了Vue插槽的理解和使用,需要的朋友可以参考下
2023-03-03
vue 页面卡死,点击无反应的问题及解决
这篇文章主要介绍了vue 页面卡死,点击无反应的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
关于el-table-column的formatter的使用及说明
这篇文章主要介绍了关于el-table-column的formatter的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue中实现千位分隔符的示例代码
本文主要介绍了vue中实现千位分隔符的示例代码,主要两种方法,一种是某一个字段转换,一种是表格table中的整列字段转换,具有一定的参考价值,感兴趣的可以了解一下
2023-11-11