Vue ElementUI table实现给表格一个单元格斜线分隔线

<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

 

 参考  Vue ElementUI table实现给表格一个单元格斜线分隔线 - SegmentFault 思否