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