Vue中table表头合并的用法

Posted 2021-01-12 minozmin

<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>