ElementUI table文字超出一行，隐藏多余文字，移入显示tips。
今天写项目的时候，实现在table里面的文字过长，需要做悬浮文字提示的功能
给el-table-column设置:show-overflow-tooltip="true"属性可以使单元格超出的内容自动折叠显示，当鼠标移入时单元格的上方会自动弹出一个小tips来显示单元格得所有内容。
<el-table-column prop="taskName" label="任务名称" width="180" :show-overflow-
tooltip="true" >
</el-table-column>这样写很简洁，不需要额外用插槽来写。就很nice！
如果你觉得展示的文字过长的时候，像下面这样，文字过多视觉体验不是很好，
tips的class名为.el-tooltip__popper，开始我试着直接通过它class名来给tips设置样式。
<style lang="scss" scoped>
.el-tooltip__popper{
max-width:20%
}
</style>发现并没有效果，后来发现是因为scoped导致的。但是如果去掉scoped样式，那么这个组件的其他style样式就会影响到所有组件。所以我们需要新建一个style标签来修改tips的样式。文章来源：https://www.toymoban.com/news/detail-503537.html
<style>
.el-tooltip__popper{
max-width:20%
}
</style>这样设置就可以生效了。文章来源地址https://www.toymoban.com/news/detail-503537.html
到了这里，关于ElementUI Table实现多行省略，鼠标移动上去显示所有文字内容的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
