vue+scss+element-ui实现表格表头斜杠一分为三

看了网上很多博客，大部分都是表头第一个斜线一份为2的样式，今天写一个样式一分为3的样式，可以根据项目情况适当增加或减少分割

<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
    <el-table-column
      :resizable="false"
      class-name="column-custom"
      prop="date"
      label="日期"
      width="120"
    >
      <template slot="header" slot-scope="scope">
        <div class="header-div">
          <div class="header-col1">区域</div>
          <div class="header-col2">类型</div>
          <div class="header-col3">水量</div>
          <div class="header-line1"></div>
          <div class="header-line2"></div>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
    <el-table-column label="1月" prop="January" ></el-table-column>
    <el-table-column label="2月" prop="February" ></el-table-column>
    <el-table-column label="3月" prop="March" ></el-table-column>
  </el-table> 
  </div>



</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {date:"2024",address:"陕西省西安市吉祥村",January:'January',February:"February",March:'March'}
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
/deep/.column-custom {
	padding: 0px;
}
 

.header-div {
	height: 80px;
	position: relative;
}
.header-col1 {
	position: absolute;
	left: 0;
	bottom: 0;
}
.header-col2 {
	position: absolute;
	right: 0;
	top: 0;
}
.header-col3 {
	position: absolute;
	right: 0;
	bottom: 0;
}

/deep/.el-table--border .el-table__cell:first-child .cell {
  padding: 0;
}
.header-line1 {
	padding-left: 0;
	width: 1px;
	height: 150px;
	transform: rotate(-67deg); /*这里需要自己调整，根据线的位置*/
	-webkit-transform-origin: top;
	transform-origin: top;
	background-color: red;/*这里需要自己调整，根据线条的颜色*/

}
.header-line2 {
	padding-left: 0;
	width: 1px;
	height: 150px;
	transform: rotate(-41deg); /*这里需要自己调整，根据线的位置*/
	-webkit-transform-origin: top;
	transform-origin: top;
	background-color: blue;/*这里需要自己调整，根据线条的颜色*/
  position: absolute;
  top: 0;
  left: 0;

}
</style>