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