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前端crud(页面布局、新增及vue中反向代理)图文详解
Vue.js是一款轻量级的前端框架,具有响应式的数据绑定和组件化的开发方式,适合构建用户界面,这篇文章主要介绍了vue前端crud(页面布局、新增及vue中反向代理)的相关资料,需要的朋友可以参考下2026-02-02


最新评论