table中嵌套多层table-蒲公英云

table中嵌套多层table

港控/mmm° 2022-01-31 03:29 673阅读 1赞

因工作业务需求，需要展示一个多层嵌套的数据结构，现整理如下，分享给需要的朋友，应用框架vue2。
初始的数据结构如下：

new Vue({
    el:"#table1",
    data:{
        table1:[{
            order: "ex-20171006",
            table2: [{
                kind: '苹果',
                table3: [{
                    variety: '红富士',
                    origin: '山东-德州'
                },{
                    variety: '蓝富士',
                    origin: '山东-威海'
                }]  
            },{
                kind: '梨',
                table3: [{
                    variety: '大鸭梨',
                    origin: '山西-大同'
                },{
                    variety: '雪花梨',
                    origin: '山西-太原'
                }]  
            }]
        }]
    }
})

HTML部分：

<table id="table1">
    <tr>
        <th>序号</th>
        <th>订单</th>
        <th class="w200">名称</th>
        <th class="w200">品种</th>
        <th class="w200">产地</th>
    </tr>
    <tr v-for="(item,i) in table1">
        <td>{
   {i}}</td>
        <td>{
   {item.order}}</td>
        <td colspan="3">
            <table class="table2">
                <tr v-for="(par, j) in item.table2">
                    <td class="w200">{
   {par.kind}}</td>
                    <td>
                        <table class="table3">
                            <tr v-for="val in par.table3">
                                <td class="w200">{
   {val.variety}}</td>
                                <td class="w200">{
   {val.origin}}</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS部分：

* {margin: 0;padding: 0;}
    body {
        padding: 20px;
    }
    table {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
    }
    table th,td {
        border: 1px solid #999;
    }
    .table2 tr td:nth-child(1) {
        border-left: 0;
    }
    .table2 tr td:nth-last-child(1) {
        border-right: 0;
    }
    .table2 tr:nth-child(1) td{
        border-top: 0;
    }
    .table2 tr:nth-last-child(1) td {
        border-bottom: 0;
    }
    .w200 {
        width: 200px;
    }