doubleyong
管理员
管理员
  • 最后登录2024-06-25
  • 发帖数1175
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:1465回复:0

[vue]Element-plus中的table表格内容过多时的处理方法

楼主#
更多 发布于:2024-01-24 09:17
环境:vue3 + element plus + typescript + vite


问题:


使用el-table显示数据时,有一个字段的数据太长,使表格样式很乱,然后,给列加了个固定宽度,之后行的高度又变得很高,也不好看。






目标效果:


对字符比较长的字段只显示部分,鼠标放上去再进行显示全部内容






解决方案:


在准备自己写字符串截取时,突然看到了一篇文章,发现el-table有一个属性,可以实现这个功能。


el-talbe中有一个show-overflow-tooltip 属性,作用是当内容过长被隐藏时显示 tooltip.


代码如下:


<el-table-column prop="couStaInfContent"
 label="内容"
 show-overflow-tooltip/>




对应的样式
<style lang="scss">
/* 全局样式表 */
/* elementui中table超出隐藏提示框宽度 */
.el-tooltip__popper {
  max-width: 200px;
}
</style>




注:如果是vite 项目样式不一样,参考下面代码
<style lang="scss" scoped>
:deep() {
  .el-popper {
    max-width: 200px !important;
  }
}
</style>
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号