第一种数据处理
在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 href="">item</a>
<ul v-if="item.children">
<li v-for="child in item.children"><a 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 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来调用自身。
已为社区贡献1条内容
所有评论(0)