接口获得数据大致是这样,一个list中嵌套一个list,怎么让中间的list也展示在页面中?
你这里值能继承上面的数据吗?像el-table需要加一个插槽
<el-table :data="tableData" style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<el-table :data="props.row.list" style="width: 100%">
<el-table-column prop="id" label="ID" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column label="商品 ID" prop="id"> </el-table-column>
<el-table-column label="商品名称" prop="name"> </el-table-column>
<el-table-column label="描述" prop="desc"> </el-table-column>
</el-table>
双循环,在第一个循环里面去循环里面的数组
双重for循环
估计你得在mycolumn里再搞个mycolumn循环
给你一个双循环的案例
<template>
<div>
<div class="menu" v-for="(item,index) in data" :key="index">
{{item.name+item.value}}
<div v-show="item.list" class="submenu" v-for="(subitem,subindex) in item.list" :key="subindex">
{{subitem.name+subitem.value}}
<div></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "index",
data: function () {
return {
data:[
{
name:"html",value:"123",
list:[
{
name:"html1",value:"123"
},
{
name:"html2",value:"123"
},
{
name:"html3",value:"123"
},
]
},
{
name:"html",value:"123"
},
{
name:"html",value:"123"
},
]
}
},
methods: {}
}
</script>
<style lang="scss" scoped>
.menu{
line-height: 40px;
background: #1D73F6;
color: #ffffff;
text-indent: 20px;
}
.submenu{
height: 40px;
background: #E8CB7E;
color: #ffffff;
text-indent: 40px;
}
</style>
还有不懂之处可以私我
在第一个循环的标签内些第二个循环,item.values是你第二次要循环的数组吗,是的话第二次就是用(it, index) in item.values 这里要注意第二次循环的项it和index不能和第一次的重名