饿了么el-table多级表头斜线效果

作者	内容	时间
jj	饿了么el-table多级表头斜线效果	2023年6月5日

1. 表格多级表头的视觉设计（图1）

图1

2. el-table多级表头效果（图2）

图2

3. el-table多级表头代码（图3）

图3

4. 给统计项单元格添加Css伪元素（图4）

图4

5. 实现效果（图5谷歌浏览器）

图5

6.ie浏览器效果（图6）

图6

问题分析

1）伪元素是什么？

CSS中，::before创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

2）为什么会在ie浏览器中缺少一半？

通过ie浏览器开发者模式查看发现，.el-table th样式中overflow:hidden导致。

3）谷歌浏览器中为什么会正常？

通过开发者工具查看before在谷歌浏览器（图7）与ie浏览器（图8）中样式发现before父元素position相对定位没有生效，而在ie浏览器中生效了，这样的导致的结果就是，在谷歌浏览器中，before是相对el-table进行的绝对定位，且脱离了el-table-group th父元素，所以未受父元素overflow:hidden影响。在ie浏览器中，before是相对el-table-group th元素进行绝对定位，所以就会被overflow:hidden进行剪裁

图7

图8

4）如何保持谷歌浏览器与ie浏览器样式统一？

我们修改伪元素到“组织”单元格上（图9）

图9 ### 5）最终实现效果谷歌浏览器（图10）与ie浏览器（图11）保持样式统一

图10

图11