element ui表格表头加斜线，表头加数字，第一列加颜色

先看效果：

1、template slot=“header” 设置表头
2、yjlbTableTh为表头数据
3、yjlbData表格数据

<template>
  <el-table :data="yjlbData">
    <el-table-column  v-for="(item, key) in yjlbTableTh" :key="key" :prop="item.prop"
          :label="item.label" align="center" >
      <template slot="header" slot-scope="scope">
        <div class="elHeadCon" v-if="item.label === '级别'">
          <div class="headerCon1">级别</div>
          <div class="headerCon2">类型</div>
          <div class="headerLine"></div>
        </div>
        <div v-else>
        {{item.label}}
        </div>
      </template>
      <template slot-scope="scope">
        <div class="" v-if="item.prop==='dj'">
          <div class="dj1" v-if="scope.row.dj.name==='红色'">{{scope.row.dj.name}}<span>({{scope.row.dj.num}})</span></div>
          <div class="dj2" v-if="scope.row.dj.name==='橙色'">{{scope.row.dj.name}}<span>({{scope.row.dj.num}})</span></div>
          <div class="dj3" v-if="scope.row.dj.name==='黄色'">{{scope.row.dj.name}}<span>({{scope.row.dj.num}})</span></div>
          <div class="dj4" v-if="scope.row.dj.name==='蓝色'">{{scope.row.dj.name}}<span>({{scope.row.dj.num}})</span></div>
        </div>
        <div v-else-if="item.prop==='tf'">{{scope.row.tf}}</div>
        <div v-else-if="item.prop==='by'">{{scope.row.by}}</div>
        <div v-else-if="item.prop==='df'">{{scope.row.df}}</div>
        <div v-else-if="item.prop==='dw'">{{scope.row.dw}}</div>
        <div v-else-if="item.prop==='bx'">{{scope.row.bx}}</div>
      </template>
    </el-table-column>
  </el-table>
</template>


export default {
  name: "index",
  data() {
    return {
      yjlbTableTh:[
        {label: '级别', prop: 'dj'},
        {label: '台风(10)', prop: 'tf'},
        {label: '暴雨(10)', prop: 'by'},
        {label: '大风(10)', prop: 'df'},
        {label: '低温(10)', prop: 'dw'},
        {label: '暴雪(10)', prop: 'bx'},
      ],  // 20230428修改
      yjlbData:[
        {
          dj:{
            name:"红色",
            num:22
          },
          tf:10,
          by:120,
          df:10,
          dw:10,
          bx:10,
        },
        {
          dj:{
            name:"橙色",
            num:22
          },
          tf:10,
          by:10,
          df:10,
          dw:10,
          bx:10,
        },
        {
          dj:{
            name:"黄色",
            num:22
          },
          tf:10,
          by:10,
          df:10,
          dw:10,
          bx:10,
        },
        {
          dj:{
            name:"蓝色",
            num:22
          },
          tf:10,
          by:10,
          df:10,
          dw:10,
          bx:10,
        },
      ], 
    }
  },
}