Vue中table表头合并的用法

<div class="panel-container">
    <div>
        <table class="table-head" width="80%">
            <thead>
                <tr>
                    <th class="headerTable" rowspan="2">名称</th>
                    <th rowspan="2">性别</th>
                    <th colspan="2">回来时间</th>
                    <th colspan="2">出去时间</th>
                </tr>
                <tr class="num">
                    <th>准时度</th>
                    <th>准时率</th>
                    <th>准时度</th>
                    <th>准时率</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="timeBody">
        <table>
            <tbody>
                <tr v-for="(item, index) in list" :key="index">
                    <td :title="item.name">{{item.name}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.outTotal}}</td>
                    <td>{{item.outPer}}</td>
                    <td>{{item.inTotal}}</td>
                    <td>{{item.inPer}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
    export default {
        data() {
            return {
                list: [{
                    name: '地名1',
                    result: '1',
                    outTotal: '12',
                    outPer: '30%',
                    inTotal: '16',
                    inPer: '34%'
                },{
                    name: '地名2',
                    result: '1'
                    outTotal: '12',
                    outPer: '30%',
                    inTotal: '16',
                    inPer: '34%'
                },{
                    name: '地名3',
                    result: '0',
                    outTotal: '12',
                    outPer: '30%',
                    inTotal: '16',
                    inPer: '34%'
                }]
            }
        }
    }
</script>

 

.panel-container {
    height: 100%;
    .table-head {
        width: 100%;
        color: #B3BBC7;
        border: .01rem solid #2B2F33;
        tr {
            height: .35rem;
            &:first-child {
                border-top: .01rem solid #2B2F33;
                border-bottom: .01rem solid #2B2F33;
                background: #3F4348;
                th:first-child, th:nth-child(2) {
                    width: 13.4%;
                }
            }
            &nth-child(odd) td {
                background: #3A3A3A；
            }
        }
        th, td {
            background: #3A3E43;
        }
        td {
            text-align: center;
        }
    }
    /deep/ .table-list {
        height： 92%；
        .ivu-table {
            overflow: auto;
            .ivu-table-body {
                border-bottom: .01rem solid #2B2F33;
            }
        }
        /deep/ thead {
            diaplay: none !important;
        }
    }
    .num {
        background: #3A3E43;
    }
}

.timeBody {
        height: 91%;
        overflow-y: auto;
        ::-webkit-scrollbar {
            display: none;
        }
        table {
            width: 100%;
            tbody {
                width: 100%;
                color: #B3BBC7;
                border: .01rem solid #2B2F33;
                tr {
                    width: 100%;
                    height: .35rem;
                    &:first-child {
                        border-top: .01rem solid #2B2F33;
                        border-bottom: .01rem solid #2B2F33;
                        background: #3F4348;
                    }
                    &:nth-child(odd) td {
                        background: #3A3E43;
                    }
                }
                th, td {
                    border-right: .01rem solid #2B2F33;
                }
                td {
                    text-align: center;
                    width: 7.2%;
                    &:nth-of-type(1) {
                        width: 13.3%;
                    }
                    &:nth-of-type(2) {
                        width: 13.15%;
                    }
                }
            }
        }
    }
}
.timeBody::-webkit-scrollbar {
    display: none;
}

 

转载于:https://www.cnblogs.com/minozMin/p/9790084.html