须要残缺的填充单元格色彩,思路是用深度选择器将须要进行色彩填充的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...