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

8次阅读

共计 669 个字符,预计需要花费 2 分钟才能阅读完成。

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

正文完
 0