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

需要完整的填充单元格颜色，思路是用深度选择器将需要进行颜色填充的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的样式

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

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

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

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

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

看下图的例子

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

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

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

结束

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