[Vue] el-table 单元格填充颜色

DiracKeeko

需要完整的填充单元格颜色,思路是用深度选择器将需要进行颜色填充的el-table中的

  1. td 2. tr td div 3. tr td div.cell
    这三个元素的设置成宽高100%同时padding: 0;

之后给div.cell添加背景色,此时大概率已经成功了。

本文解决的是后面的小概率不成功的情况。
这个不成功来源于show-overflow-tooltip属性

以官方案例举例,
先看一下没有开启show-overflow-tooltip的div.cell的样式
image.png

这个时候div.cell元素的宽度等于 div.cell的父元素td的宽度,没有问题,一切正常。

开启show-overflow-tooltip之后,当单元格宽度不够时,会展示一个tooltip
image.png

再看一下开启show-overflow-tooltip之后的div.cell的样式
image.png

多出来一个el-tooltip类,多出来一个内联样式width
问题就出在这个内联样式width上,这个内联样式导致div.cell的宽度比父元素td的宽度小了2px
image.png

这2px的差距,就会导致单元格颜色填充的时候,各个横向的cell之间有间断。

看下图的例子
image.png

而我们希望各个横向的cell之间是连续的,像下一张图展示效果
image.png

问题出现的原因是内联样式,而内联样式的优先级仅次于!important
那解决方案只有 !important

依然是使用深度选择器,
选中tr td div.cell.el-tooltip,加上 width: 100% !important;

结束

同步更新到自己的语雀
https://www.yuque.com/diracke...

阅读 1k
25 声望
1 粉丝
0 条评论
25 声望
1 粉丝
文章目录
宣传栏