element-ui表格文字太多溢出设置

需求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。



假如你修改的是按钮，或者输入框等多处复用的样式，则会引起大部分污染。



作者：顺小星
链接：https://www.jianshu.com/p/81da88bea672
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

https://www.jianshu.com/p/81da88bea672