elementui问题记录-el-table组件的列属性show-overflow-tooltip内容过多时，如何设置tooltip的宽度

女子甚好

于 2020-08-04 11:16:40 发布

阅读量7.9k

点赞数 7

分类专栏：前端 elementui问题记录文章标签： elementui el-tabel

本文链接：https://blog.youkuaiyun.com/qq_38332722/article/details/107782018

版权

前端同时被 2 个专栏收录

4 篇文章

订阅专栏

elementui问题记录

3 篇文章

订阅专栏

本文探讨了在使用ElementUI的el-table组件时，如何优雅地处理单元格数据溢出问题。通过修改全局样式，实现了当鼠标悬停在单元格上时，以美观的方式展示完整数据，避免了默认显示方式可能带来的布局问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                        
                    
                    案发现场：
 使用elementui el-table的:show-overflow-tooltip="true"属性时，当单元格数据过多时，鼠标划过时显示全部数据，此时数据会显示在一行中，不太美观，需要修改其宽度。
 
解决方案：
 未生效的解决办法：第一次修改，在<style lang="scss" scoped>中添加如下样式，但是没有生效，添加/deep/也没有生效。<style lang="scss" scoped>
// @import "../assets/css/base.css";
/deep/ .el-tooltip__popper {
  max-width: 300px;
}
 终极解决办法：该样式需要加在全局样式中。不能在<style scoped></style>中修改，因为不会生效。
 添加base.css,然后引用（Vue项目）<style lang="scss" scoped>
@import "../assets/css/base.css";
 
实现效果：
 

                