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

用户9914333

发布于 2024-01-23 20:59:12

1.4K00

代码可运行

文章被收录于专栏：bug收集bug收集

运行总次数：0

代码可运行

bug收集：专门解决与收集bug的网站

问题：

使用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>

最终效果：

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2024-01-22，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 bug收集微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度