递归组件:
<template>
<div>
<uni-collapse ref="collapse" v-for="(item, index) in data">
<!-- 分为两种情况
情况一:有子集 -->
<uni-collapse-item :key="index" :title="item.title"
v-if="item.subList.length > 0">
<my-item class="sub-list" :data="item.subList" :count="count+1"></my-item>
</uni-collapse-item>
<!-- 情况二:没子集-->
<uni-collapse-item :key="index" v-else :title="item.title">
</uni-collapse-item>
</uni-collapse>
</div>
</template>
<script>
import UniCollapse from "../uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue";
import UniCollapseItem from "../uni_modules/uni-collapse/components/uni-collapse-item/uni-collapse-item.vue";
export default {
name: "myItem",
components: {
UniCollapseItem,
UniCollapse
},
props: {
data: {
type: Array,
default: [],
},
count: {
type: Number,
default: 1,
}
},
data() {
return {}
},
mounted() {
}
};
</script>
调用递归组件:
<template>
<view>
<!-- #ifndef H5 -->
<statusBar></statusBar>
<!-- #endif -->
<div id="header">
<uni-nav-bar id="navTop" title="今天不干也得干"
background-color="var(--bg-color)" :border="false">
</uni-nav-bar>
</div>
<div class="body">
<my-item :data="listData"></my-item>
</div>
</view>
</template>