vue.js 动态合并单元格问题

单元格动态合并

<div id="app">
    <table border="1">
        <tr><td v-for="name of json.fieldNames" :key="name">{{name}}</td></tr>
        <template v-for="(tr,index) of json.items">
            <tr v-for="(item,i) of tr.items" :key="index">
            //i === 0,单元格合并，多次循环，只循环一次
                <td v-if="i===0" :rowspan="tr.items.length">{{tr.name}}</td>
                <td v-for="td of item" :key="index+'_'+i">{{td}}</td>
            </tr>
        </template>
    </table>
</div>
<script>
    new Vue({
        name:'table',
        el:'#app',
        data(){
            return {
                json:{
                    "fieldNames": [
                        "测点号",
                        "深度(m)",
                        "本次位移增量(mm)",
                        "累计位移(mm)",
                        "变化速率(mm/d)"
                    ],
                    "items":[
                        {
                            "name": "aaaaaa",
                            "items": [
                                [
                                    "0.5",
                                    "0.0",
                                    "-",
                                    "-"
                                ],
                                [
                                    "1.0",
                                    "0.0",
                                    "-",
                                    "-"
                                ]
                            ]
                        },
                        {
                            "name": "bbbbbb",
                            "items": [
                                [
                                    "0.5",
                                    "0.04",
                                    "-",
                                    "-"
                                ]
                            ]
                        }
                    ]
                }
 
            }
        }
    })
</script>