前端列表的内容长度过长,一般我们在<el-table-clumn>中添加show-overflow-tooltip来实现
前端代码:
<el-table-column
key="content"
label="内容"
align="left"
prop="content"
show-overflow-tooltip
/>
效果:
弹出内容白底是在<el-table>中添加了tooltip-effect="light",不写默认是dark
这个时候我们发现弹出内容宽度占据了满屏,面向某度编程的我在网上搜罗了一圈,基本上答案都是添加下面这段css样式(我试了不好使):
<style lang="scss">
.el-tooltip__popper {
max-width: 50%;
}
</style>
然后F12大法,发现了弹出内容部分有一段这样的代码:
于是将这段css样式写成了这样(亲测可用):
<style lang="scss">
.el-popper {
max-width: 50% !important;
}
</style>
最终效果:
注意:
不要直接在<style lang="scss" scoped>
中添加,否则不会生效。建议重新写一个<style>