zoukankan      html  css  js  c++  java
  • vue element 表头添加斜线

    <template>
        <div class="app-container">
            <el-table :data="tableData3" style=" 100%">
                <el-table-column width="120" prop="date"></el-table-column>
                <el-table-column prop="name" label="姓名" width="120"></el-table-column>
                <el-table-column label="地址">
                    <el-table-column prop="province" label="省份" width="120"></el-table-column>
                    <el-table-column prop="city" label="市区" width="120"></el-table-column>
                    <el-table-column prop="address" label="地址" width="300"></el-table-column>
                    <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
                </el-table-column>
            </el-table>
        </div>
    </template>
    
    <script>
        export default {
            filters: {},
            data() {
                return {
                    tableData3: [{
                        date: '2016-05-03',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-02',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-08',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-06',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-07',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }]
                }
            },
            created() {},
            methods: {}
        }
    </script>
    <style lang="scss">
        .el-table thead.is-group th {
            background: #fff;
        }
        
        .el-table thead.is-group tr:first-of-type th:first-of-type:before {
            content: '日期';
            text-align: center;
            position: absolute;
             152px;
            height: 1px;
            bottom: 30px;
            right: 0;
        }
        
        .el-table thead.is-group tr:first-of-type th:first-of-type:after {
            content: '配送新增';
            text-align: center;
            position: absolute;
             152px;
            top: 10px;
            left: 0;
        }
        
        .el-table thead.is-group tr:first-of-type th:first-of-type .cell {
            position: absolute;
            top: 0;
            left: 0;
             152px;
            height: 1px;
            background-color: #EBEEF5;
            display: block;
            text-align: center;
            transform: rotate(38deg);
            transform-origin: top left;
            -ms-transform: rotate(38deg);
            -ms-transform-origin: top left;
            -webkit-transform: rotate(38deg);
            -webkit-transform-origin: top left;
        }
    </style>

    效果:

  • 相关阅读:
    剑指OFFER之复杂链表的复制(九度OJ1524)
    剑指OFFER之二叉树中和为某一值的路径(九度OJ1368)
    剑指OFFER之从二叉搜索树的后序遍历序列(九度OJ1367)
    剑指OFFER之从上往下打印二叉树(九度OJ1523)
    剑指OFFER之栈的压入、弹出序列(九度OJ1366)
    剑指OFFER之包含min函数的栈(九度OJ1522)
    剑指OFFER之顺时针打印矩阵(九度OJ1391)
    剑指OFFER之树的子结构(九度OJ1520)
    剑指OFFER之二叉树的镜像(九度OJ1521)
    VM安装CentOs7虚拟机后无法上网之解决方法
  • 原文地址:https://www.cnblogs.com/zhaozhenzhen/p/12187482.html
Copyright © 2011-2022 走看看