table中嵌套多层table

港控/mmm° 2022-01-31 03:29 610阅读 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;
        }

实现效果：

![20171006211834432][]

上述写法还有一个缺点，就是浏览器缩小到一定程度，表格的样式会变形，内部table与外部table的单元格线对不齐：

![20171006213417897][]  
解决方法，给最外围table加一个最小宽度，具体最小宽度定义多少视内部table的td宽度和td列数合计为参考值，此例子最小值设为1000px：

#table1 {
        min-width: 1000px;
    }

最后效果图：

![20171006214211705][]

![20171006214230115][]

以上部分有不足之处，欢迎指出，谢谢。

以上只是自定义结构展示，殊不知Vue自带一个template模板标签，可以用v-for循环指令，渲染出来是没有实际标签的，特别适合table标签中循环渲染特殊的数据结构。

[20171006211834432]: /images/20220131/0e1056ae0dc24116874b3220ec684271.png
[20171006213417897]: /images/20220131/02cb6ef207814f3ea4be9a6cbd5832fb.png
[20171006214211705]: /images/20220131/8ce6278919274a8aa9253e8128ced846.png
[20171006214230115]: /images/20220131/a98844c8ff6c4c56be201179ccc78024.png