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;
            width: 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;
            width: 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;
            width: 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>

    效果:

  • 相关阅读:
    Java 泛型
    face_recognition
    用于图像分割的卷积神经网络:从R-CNN到Mark R-CNN
    OpenCV探索
    基于深度学习的目标检测技术演进:R-CNN、Fast R-CNN、Faster R-CNN
    卷积神经网络CNN总结
    (4)Smali系列学习之Smali语法详解内部类
    log4j的配置信息
    C#的async和await
    Java魔法堂:String.format详解
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/13373603.html
Copyright © 2011-2022 走看看