因工作業務需求，需要展示一個多層巢狀的資料結構，現整理如下，分享給需要的朋友，應用框架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;
    }

實現效果：

上述寫法還有一個缺點，就是瀏覽器縮小到一定程度，表格的樣式會變形，內部table與外部table的單元格線對不齊：

解決方法，給最外圍table加一個最小寬度，具體最小寬度定義多少視內部table的td寬度和td列數合計為參考值，此例子最小值設為1000px：

#table1 {
    min-width: 1000px;
} 

最後效果圖：

以上部分有不足之處，歡迎指出，謝謝。

以上只是自定義結構展示，殊不知Vue自帶一個template模板標籤，可以用v-for迴圈指令，渲染出來是沒有實際標籤的，特別適合table標籤中迴圈渲染特殊的資料結構。