关于前端:Vue-eltable-单元格填充颜色

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