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>

    效果:

  • 相关阅读:
    django框架的models
    图像的特征提取
    laravel框架学习
    机器学习--Classifier comparison
    java中的静态变量---static
    初次编程经历
    TERSUS笔记员工信息513-Tersus表格中勾选框升级处理
    TERSUS笔记员工信息512-Tersus勾选框全选和全不选的三种设定方法(转载+补充)
    TERSUS笔记员工信息511-Mysql查询
    TERSUS笔记员工信息510-css文字超出显示
  • 原文地址:https://www.cnblogs.com/zhaozhenzhen/p/12187482.html
Copyright © 2011-2022 走看看