element 表头添加斜线

实现原理

通过改css样式实现

1. 去掉第一个单元格的下边框
2. 第一列第一个单元格和第二个单元格的伪元素设置绝对定位，宽度设成1px,高度根据自己表格调整
3. 通过旋转两个单元格伪元素，并设置旋转起始点，使两个伪元素旋转到重合位置，达到斜线的效果
4. 注意style不要设置scope

 <el-table
          :data="tableData"
          border
          size="mini"
          stripe
          :header-cell-style="headClass"
          style="width: 100%;border:1px solid #00aeef;"
        >
          <el-table-column
            prop="year"
            label="行业"
            align="center"
            width="70"
            style="background:#ffffff !important;"
          >
            <el-table-column
              prop="year"
              label="时间"
              align="center"
              width="70"
              style="background:#ffffff;"
            >
              <template slot-scope="scope">
                {{ scope.row.year }}年
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column
            prop="keyun_number"
            label="客运"
            align="center"
            width="65"
          >
          </el-table-column>
</table>

//css
// 不要设置 scope 
<style lang="less">
.el-table thead.is-group th {
  background: none;
  padding: 0px;
}
.el-table thead.is-group tr:first-of-type th:first-of-type,
.el-table thead.is-group tr:last-of-type th:first-of-type {
  background: #ffffff !important;
}
.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 div.cell {
  text-align: right;
}
.el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
  text-align: left;
}
.el-table thead.is-group tr:first-of-type th:first-of-type:before {
  content: "";
  position: absolute;
  width: 1px;
  // height: 55px;
  height: 42px;  //自行调整
  top: 0;
  left: 0;
  background-color: grey;
  opacity: 0.2;
  display: block;
  // transform: rotate(-43deg);
  transform: rotate(-56deg);  //自行调整
  -webkit-transform-origin: top;
  transform-origin: top;
}
.el-table thead.is-group tr:last-of-type th:first-of-type:before {
  content: "";
  position: absolute;
  width: 1px;
  // height: 60px;
  height: 46px;  //自行调整
  bottom: 0;
  right: 0;
  background-color: grey;
  opacity: 0.2;
  display: block;
  // transform: rotate(-45deg);  //自行调整
  transform: rotate(-56deg);
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
}
</style>