前端基础学习-element-ui表格表头做成斜线表头

这部分代码样式部分参照表头斜线
首先上效果图

这里主要是针对二级表头对其样式进行选择修改，这里需要注意一定要是二级表头才能做出这样的效果

html代码

        <el-table  :data="slashList" border height="400">
          <el-table-column label="信息" show-overflow-tooltip width="140" align="right">
            <el-table-column prop="title" label="标题" show-overflow-tooltip width="120" align="left"></el-table-column>
          </el-table-column>
          <el-table-column prop="url" label="请求地址" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="操作人" show-overflow-tooltip></el-table-column>
          <el-table-column prop="date" label="时间" show-overflow-tooltip></el-table-column>
        </el-table>

这里的表格数据是通过mock模拟的，前面博文有说过，就不再赘述了
css代码
这部分主要参照了开头引入的链接，注意不要放在scope中

<style>
.el-table thead.is-group th {
  background: none;
}
.el-table thead.is-group tr:first-of-type th:first-of-type {
  border-bottom: none;
}
.el-table thead.is-group tr:first-of-type th:first-of-type:before {
  content: '';
  position: absolute;
  width: 1px;
  height: 100px;
  top: 0;
  left: 0;
  background-color: grey;
  opacity: 0.3;
  display: block;
  transform: rotate(-57deg);
  transform-origin: top;
}
.el-table thead.is-group tr:last-of-type th:first-of-type:before {
  content: '';
  position: absolute;
  width: 1px;
  height: 100px;
  bottom: 0;
  right: 0;
  background-color: grey;
  opacity: 0.3;
  display: block;
  transform: rotate(-56deg);
  transform-origin: bottom;
}
</style>