Element table 给表头添加斜线分隔

方法一：利用官方文档中 多级表头 + 自定义样式 实现

示例：

• 自定义表格类名，防止污染全局样式，一定要定义 align 、 header-align??以及 :resizable="false"? 防止 拖动改变 列宽度 产生 错位

<template>
  <div class=''>
    <el-table class="group-two-bias-divide" stripe v-loading="loading" :data="tableList" border max-height="500px">
      <el-table-column label="集团" width="180" align="right" fixed="left" :resizable="false">
        <el-table-column label="营收类目" prop="proName" width="180" header-align="left" fixed="left" :resizable="false">
          <template #default="{ row }"><span style="padding-left: 1em;">{{ row.proName }}</span></template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="集团一号" prop="companyOne" />
      <el-table-column label="集团二号" prop="companyTwo" />
    </el-table>
  </div>
</template>

<script setup>
  const loading = ref(false)
  const tableList = ref([
    {
      proName:'日实际收款',
      companyOne:394.09,
      companyTwo:3794.09
    },
    {
      proName:'月实际累计收款',
      companyOne:2394.09,
      companyTwo:233794.09
    },
    {
      proName:'年实际累计收款',
      companyOne:33394.09,
      companyTwo:356794.09
    }
  ]);

</script>
<style lang='scss' scoped>
:deep(.el-table.group-two-bias-divide thead.is-group tr:first-of-type th:first-of-type){
  border-bottom: none;
  background: linear-gradient(360deg, #f4fcf9 0%, #E7F7F4 100%);
  // &::before{
  //   content: "";
  //   position: absolute;
  //   width: 1px !important;
  //   height: 190px;
  //   top: 0 !important;
  //   left: -5px !important;
  //   background-color: grey;
  //   opacity: 0;
  //   display: block;
  //   transform: rotate(284deg);
  //   -webkit-transform-origin: top;
  //   transform-origin: top;
  // }
}
:deep(.el-table.group-two-bias-divide thead.is-group tr:last-of-type th:first-of-type){
  background: linear-gradient(360deg, #F5FCFA 0%, #f4fcf9 100%);
  &::before{
    content: "";
    position: absolute;
    width: 1px !important;
    height: 200px !important;
    top: auto !important;
    left: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    background-color: #d6d6d6;
    display: block;
    transform: rotate(298deg);
    transform-origin: bottom;
  }
}
</style>

方法二：利用 自定义表头 插槽 实现

示例：

• 插槽 自定义类名 以及 设置??:resizable="false"? 防止 拖动改变 列宽度 产生 错位

<template>
  <div class=''>
    <el-table stripe v-loading="loading" :data="tableList" border max-height="500px">
      <el-table-column label="" prop="proName" width="180" fixed="left" :resizable="false">
        <template #header>
          <div class="group-bias-divide">
            <div class="top">集团</div>
            <div class="bottom">营收泪目</div>
          </div>
        </template>
        <template #default="{ row }">
          <span style="padding-left: 1em;">{{ row.proName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="集团一号" prop="companyOne" />
      <el-table-column label="集团二号" prop="companyTwo" />
    </el-table>
  </div>
</template>

<script setup>
  const loading = ref(false);
  const tableList = ref([
    {
      proName: "日实际收款",
      companyOne: 394.09,
      companyTwo: 3794.09,
    },
    {
      proName: "月实际累计收款",
      companyOne: 2394.09,
      companyTwo: 233794.09,
    },
    {
      proName: "年实际累计收款",
      companyOne: 33394.09,
      companyTwo: 356794.09,
    },
  ]);
</script>
<style lang='scss' scoped>
  :deep(.group-bias-divide) {
    .top {
      text-align: right;
      padding-right: .5em;
      box-sizing: border-box;
    }

    .bottom {
      text-align: left;
      padding-left: 1em;
      box-sizing: border-box;

      &::before {
        content: "";
        position: absolute;
        width: 1px !important;
        height: 187px !important;
        top: auto !important;
        left: auto !important;
        bottom: 0 !important;
        right: 0 !important;
        background-color: #d6d6d6;
        display: block;
        transform: rotate(289deg);
        transform-origin: bottom;
      }
    }
  }
</style>