【实战项目】element-ui表格文字太多溢出设置
2019-10-17 本文已影响0人
顺小星
需求1:行中的数据太多导致表格变形
image.png解决办法:在列属性中加上一个:
show-overflow-tooltip
image.png
最终结果:鼠标移入才会显示对应数据,见下↓
image.png需求二:上述cover弹窗太长,充满整个屏幕用户体验
解决办法:另外再写一个style,直接写在scope中很可能没有效果,如果去掉scope会污染全局
<style lang="css">
.el-tooltip__popper {
max-width: 30%;
line-height: 30px;
}
image.png
效果:
image.png我不管我最厉害。
更改!上述组件样式修改万不可如此,之前未出现大规模样式冲突是因为,整个项目中只有这里用到了那个cover。
假如你修改的是按钮,或者输入框等多处复用的样式,则会引起大部分污染。
正确解决办法,在要修改的引用组件上加上一个id,用id跟deep深度修改组件样式。如下:
在要修改样式的组件上加个id自加id与deep配合