Element-plus中的table表格内容过多时的处理方法
Element-plus中的table表格内容过多时的处理方法
用户9914333
发布于 2024-01-23 12:59:12
发布于 2024-01-23 12:59:12
代码可运行
运行总次数：1
代码可运行
关联问题
换一批
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 删除
评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
推荐阅读
相关推荐
el-table 多表格弹窗嵌套数据显示异常错乱问题
更多 >
腾讯云开发者
