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>

效果图：

总结

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

您可能感兴趣的文章:

vuex actions传递多参数的处理方法
今天小编就为大家分享一篇vuex actions传递多参数的处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue v-model组件封装(类似弹窗组件)
这篇文章主要介绍了Vue中的 v-model组件封装(类似弹窗组件),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-01-01
vue样式叠层z-index不起作用的解决方案
这篇文章主要介绍了vue样式叠层z-index不起作用的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue实现拖放排序功能的实例代码
本文通过实例代码给大家介绍了Vue中实现拖放排序功能，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-07-07
Vue vant使用ImagePreview实现预览图片
这篇文章主要介绍了Vue vant使用ImagePreview实现预览图片，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue引入axios同源跨域问题
这篇文章主要介绍了vue引入axios同源跨域问题，文章给大家提供了解决方案，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-09-09
vue基于better-scroll实现左右联动滑动页面
这篇文章主要介绍了vue基于better-scroll实现左右联动滑动页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
浅析Vue中自定义指令的用法
在Vue中,有两种类型的自定义指令：局部指令和全局指令,但是除了这些指令 Vue也允许我们自己定义自己的指令,下面我们就来学习一下Vue中自定义指令的用法吧
2023-08-08
详解Vue中的keep-alive
这篇文章主要为大家介绍了Vue中的keep-alive，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
vue如何从后台下载.zip压缩包文件
这篇文章主要介绍了vue如何从后台下载.zip压缩包文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09