性能优化

【实战项目】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配合

这样才是真的ok

上一篇下一篇

猜你喜欢

热点阅读