在table的tr中，有些做为父级，有些做为子级，区别是用class来区分，点击父级的按钮，子级会隐藏和显示切换。
<body class=""> <div id="example1"> <table id="partnerTable"> <template v-for="(item,index) in data"> <tr class="parent"> <td>{{item.title}}</td> <td><button v-if="item.children" @click="changeState(index)">改变</button></td> </tr> <template v-if="item.children"> <tr v-show="item.childShow" :class="'child_'+item.id" v-for="child in item.children"> <td>{{child.title}}</td> </tr> </template> </template> </table> </div> <script src="../js/vue.js"></script> <script> var example1 = new Vue({ el: "#example1", data: { data: [{ id: "row_1", title: 'row1', children: [{ title: 'row1-1', }, { title: 'row1-2' } ], childShow: false, }, { id: "row_2", title: 'row2', children: [{ title: 'row2-1', }, { title: 'row2-2' } ], childShow: false, }, { id: "row_3", title: 'row3', }, { id: "row_4", title: 'row4' } ] }, methods: { changeState: function(index) { this.data[index].childShow = !this.data[index].childShow } } }) </script></body>总结：因为要分成外层和内层循环，所以我们用template把外层的tr包裹起来（必须用template包裹），内存可以用template包裹也可以不用。
第二种数据类型--表格进行合并单元格的情况 <table id="partnerTable"> <thead> <tr> <th>客户名称</th> <th>招标数</th> <th>项目名称</th> <th>项目状态</th> <th>操作</th> </tr> </thead> <tbody > <template v-for="item1 in data"> <tr v-for="(item2,index) in item1.items"> <td v-if="!index" :rowspan="item1.items.length">{{item1.clientName}}</td> <td v-if="!index" :rowspan="item1.items.length">{{item1.tenderAmount}}</td> <td>{{item2.projectName}}</td> <td>{{item2.projectStatus}}</td> <td> <button style="margin-right:10px;">订阅</button> <button>查看详情</button> </td> </tr></template> </tbody></table> var example1=new Vue({ el:"#example1", data:{ data:[ {clientName:'标题1',tenderAmount:'2',items:[ {projectName:'标题一有关的内容1',projectStatus:'招标'}, {projectName:'标题一有关的内容2',projectStatus:'拟在建'},] }, {clientName:'标题2',tenderAmount:'4',items:[ {projectName:'标题二有关的内容1',projectStatus:'招标'}, {projectName:'标题二有关的内容2',projectStatus:'中标'}, {projectName:'标题二有关的内容3',projectStatus:'中标'}, {projectName:'标题二有关的内容4',projectStatus:'招标'},] },] }, })上面的v-if="!index" 指index为0 的情况下，则显示那一行的td，也就是合并横跨的单元格，只显示tr第一次循环中的td。
第三种情况--二级列表 <ul> <li v-for="item in data"> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" href="">item</a> <ul v-if="item.children"> <li v-for="child in item.children"><a rel="external nofollow" rel="external nofollow" rel="external nofollow" href="">child</a></li> </ul> </li></ul>数据是第一种的数据格式类型
第四种情况 -- 多级数据（递归组件） <body class=""> <div id="example1"> <my-trees v-bind:list="data"></my-trees> </div> <script src="../js/vue-2.6.10.js"></script> <script> var myTrees = { props: ["list"], name: "treeMenus", template: ` <ul class="tree-list"> <li v-for="item in list"><a rel="external nofollow" rel="external nofollow" rel="external nofollow" href="">{{item.title}}</a><tree-menus :list="item.children"></tree-menus></li> </ul> `, } var example1 = new Vue({ el: "#example1", components: { myTrees }, data: { data: [{ id: "row_1", title: 'row1', children: [ { title: 'row1-1' }, { title: 'row1-2' } ], childShow: false, }, { id: "row_2", title: 'row2', childShow: false, }, { id: "row_3", title: 'row3', }, { id: "row_4", title: 'row4', } ] }, mounted: function() { this.$el.firstChild.className += " outul" } }) </script></body>递归组件一定要定义name属性，通过name来调用自身。
转载于:https://my.oschina.net/u/2612473/blog/3084271