el-table表格的标头带斜线

<template>
    <div class="tableBox">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="handleHeaderCell">
          <el-table-column prop="date"  fixed>
            <template slot="header">
              <div style="display: flex; justify-content: space-between">
                <span>日期</span> <span>统计</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="配送信息" >
            <el-table-column prop="name" label="姓名" > </el-table-column>
            <el-table-column label="地址" >
              <el-table-column prop="province" label="省份" > </el-table-column>
              <el-table-column prop="city" label="市区" > </el-table-column>
              <el-table-column prop="address" label="地址" > </el-table-column>
              <el-table-column prop="zip" label="邮编" > </el-table-column>
              <el-table-column prop="zip1" label="邮编" > </el-table-column>
               <el-table-column prop="zip2" label="邮编" > </el-table-column>
            </el-table-column>
          </el-table-column>

        </el-table>
        <div class="line" :style="{width:lineWhide+'px',transform:'rotate('+lineDeg+'deg)'}"></div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            //第一个单元格的类名
            firstCellClassName: "",
            //第一个单元格的宽度
            firstCellWidth: 0,
            //第一个单元格的高度
            firstCellHeight: 0,
            //对角线的宽度
            lineWhide:0,
            //对角线的角度
            lineDeg:0,
            //窗口宽度
            screenWidth:document.body.clientWidth,
            timer:null,
            //表格数据
            tableData:[],
        }
    },
     mounted() {
        //窗口或框架被调整大小时发生
        window.onresize=()=>{
            return (()=>{
                window.screenWidth =document.body.clientWidth
                this.screenWidth = window.screenWidth
            })
        }
    },
    methods:{
        handleHeaderCell({ row, column, rowIndex, columIndex }) {
            //如果使用的多级表头  就需要判断是第几个表头
            if (rowIndex == 0) {
                //获取第一个单元格的class类名
                this.firstCellClassName = row[0].id;
                //获取第一个单元格的宽度，这个方法直接返回了
                this.firstCellWidth = row[0].realWidth;
                //这个时候他是找不到元素的  所以在调用一次
                this.$nextTick(() => {
                this.getsElement();
                });
            }
            console.log(this.firstCellClassName, this.firstCellWidth, "查看类名");
        },
        getsElement() {
            //用原生获取第一个单元格的高度
            var a = document.getElementsByClassName(this.firstCellClassName)[0];
            this.firstCellHeight = a.offsetHeight;
            //获取对角线的长度 a²+b²=c²
            this.lineWhide = Math.sqrt((this.firstCellWidth*this.firstCellWidth)+(this.firstCellHeight*this.firstCellHeight))
            
            //获取对角线旋转的角度
            this.lineDeg = Math.atan(this.firstCellHeight/this.firstCellWidth)*180/Math.PI


            console.log(this.firstCellHeight,"查看高度")
            console.log(this.lineWhide,"对角线宽度")
            console.log(this.lineDeg,"角度")

        },
    },
    watch:{
        //监听窗口的变化 变了之后
        screenWidth(val){
            if(!this.timer){
                this.screenWidth =val
                this.timer =true
                // setTimeout(function(){
                this.getsElement()
                // })
            }
        }
    }
}
</script>
<style scoped lang="scss">
.tableBox {
    margin-top: 50px;
    position: relative;
    /* background-color: red; */
}
.line {
    position: absolute;
    /* position:fixed; */
    z-index: 9;
    top: 0;
    left: 0;
    height: 1px;
    width: 350px;
    background-color: black;
    transform-origin: left;
    transform: rotate(24.2deg);
}
</style>

我项目中改动后使用

<template>
    <div class="tableBox">
        <el-table :data="tableData" style="width: 100%" :header-cell-style="handleHeaderCell">
            
          <el-table-column prop="date" fixed>
              <el-table-column type="index" width="80" />
            <template slot="header">
              <div style="display: flex; justify-content: space-between">
                <span>L</span> <span>S</span>
              </div>
            </template>
            
          </el-table-column>
            <el-table-column label="1" ><template slot-scope="scope"><div class="tab-back-color" :style="{backgroundColor:backgroundColorFun(1)}">1级</div></template></el-table-column>
            <el-table-column label="2" ><template slot-scope="scope"><div class="tab-back-color" :style="{backgroundColor:backgroundColorFun(2)}">2级</div></template></el-table-column>
            <el-table-column label="3" ><template slot-scope="scope"><div class="tab-back-color" :style="{backgroundColor:backgroundColorFun(3)}">3级</div></template></el-table-column>
            <el-table-column label="4" ><template slot-scope="scope"><div class="tab-back-color" :style="{backgroundColor:backgroundColorFun(4)}">4级</div></template></el-table-column>
            <el-table-column label="5" ><template slot-scope="scope"><div class="tab-back-color" :style="{backgroundColor:backgroundColorFun(1)}">4级</div></template></el-table-column>
            

        </el-table>
        <div class="line" :style="{width:lineWhide+'px',transform:'rotate('+lineDeg+'deg)'}"></div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            //第一个单元格的类名
            firstCellClassName: "",
            //第一个单元格的宽度
            firstCellWidth: 0,
            //第一个单元格的高度
            firstCellHeight: 0,
            //对角线的宽度
            lineWhide:0,
            //对角线的角度
            lineDeg:0,
            //窗口宽度
            screenWidth:document.body.clientWidth,
            timer:null,
            //表格数据
            tableData:[{},{},{},{},{},],
        }
    },
    mounted() {
        //窗口或框架被调整大小时发生
        window.onresize=()=>{
            return (()=>{
                window.screenWidth =document.body.clientWidth
                this.screenWidth = window.screenWidth
            })
        }
    },
    computed:{
        backgroundColorFun(){
            return (num)=>{
                switch(num){
                    case 1:
                        return '#FF0000';
                    case 2:
                        return '#FF9900';
                    case 3:
                        return '#FFFF00';
                    case 4:
                        return '#3366FF';
                    
                }
            }
        }
    },
    methods:{
        handleHeaderCell({ row, column, rowIndex, columIndex }) {
            //如果使用的多级表头  就需要判断是第几个表头
            if (rowIndex == 0) {
                //获取第一个单元格的class类名
                this.firstCellClassName = row[0].id;
                //获取第一个单元格的宽度，这个方法直接返回了
                this.firstCellWidth = row[0].realWidth;
                //这个时候他是找不到元素的  所以在调用一次
                this.$nextTick(() => {
                this.getsElement();
                });
            }else if(rowIndex == 1){
                return {display: 'none'}
            }
            console.log(this.firstCellClassName, this.firstCellWidth, "查看类名");
        },
        getsElement() {
            //用原生获取第一个单元格的高度
            var a = document.getElementsByClassName(this.firstCellClassName)[0];
            this.firstCellHeight = a.offsetHeight;
            //获取对角线的长度 a²+b²=c²
            this.lineWhide = Math.sqrt((this.firstCellWidth*this.firstCellWidth)+(this.firstCellHeight*this.firstCellHeight))
            
            //获取对角线旋转的角度
            this.lineDeg = Math.atan(this.firstCellHeight/this.firstCellWidth)*180/Math.PI


            console.log(this.firstCellHeight,"查看高度")
            console.log(this.lineWhide,"对角线宽度")
            console.log(this.lineDeg,"角度")

        },
    },
    watch:{
        //监听窗口的变化 变了之后
        screenWidth(val){
            if(!this.timer){
                this.screenWidth =val
                this.timer =true
                // setTimeout(function(){
                this.getsElement()
                // })
            }
        }
    }
}
</script>
<style scoped lang="scss">
.tableBox {
    margin-top: 1rem;
    position: relative;
    /* background-color: red; */
    .tab-back-color{
        width: 4rem;
        height: 1.5rem;
        text-align: center;
        line-height: 1.5rem;
    }
}
.line {
    position: absolute;
    /* position:fixed; */
    z-index: 9;
    top: 0;
    left: 0;
    height: 1px;
    width: 350px;
    background-color: gainsboro;
    transform-origin: left;
    transform: rotate(24.2deg);
}
</style>