关于vue.js:Vue-ElementUI-table实现给表格一个单元格斜线分隔线

1、为了实现需求表头的一个单元格划分分割线如下图

2、vue 中应用 elementui 的 table 实现（自己用 elementui 比拟多）
话不多说，效果图如下：

代码如下：

<template>
    <div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column :resizable="false" class-name="elChgTbeClmn" prop="date" label="日期" width="120">
                <template slot="header" slot-scope="scope">
                    <div class="elHeadCon">
                        <div class="headerCon1"> 区域 </div>
                        <div class="headerCon2"> 类型 </div>
                        <div class="headerLine"></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>
    </div>
</template>

<script>
export default {
    name: 'sysIndex',
    components: {},
    data() {
        return {
            tableData: [
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }
            ]
        };
    },
    mounted() {},
    methods: {}};
</script>

<style>
/* 如果单元格的 padding */
.elChgTbeClmn .cell {padding: 0px !important;}
.elHeadCon {
    height: 50px;
    position: relative;
}
.headerCon1 {
    position: absolute;
    left: 0;
    bottom: 0;
}
.headerCon2 {
    position: absolute;
    right: 0;
    top: 0;
}
.headerLine {
    width: 1px;
    height: 150px;
    transform: rotate(-68deg); /* 这里须要本人调整，依据线的地位 */
    transform-origin: top;
    background-color: red;
}
</style>