需求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配合
网友评论