递归组件 list

<template>
	<view>
		<view class="item" v-for="item in dataList">
			<view class="level-layout">
				<text>{{item.name}}</text>
				<text v-if="item.children.length" @click="$set(item,'isShow',!item.isShow)">查看更多</text>
			</view>

			<list v-if="item.isShow" :dataList="item.children"></list>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'list',
		props: {
			dataList: {
				type: Array,
				default: []
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.item {
		margin: 12px;
		width: calc(100% - 24px);
	}

	.level-layout {
		background-color: #FFFFFF;
		padding: 0 16px 0 16px;
		height: 60px;
		border-radius: 8px;
		display: flex;
		justify-content: space-between;
		line-height: 60px;
	}
</style>

父级组件 test

<template>
	<view class="list">
		<view class="item" v-for="item in dataList">
			<view class="level-layout">
				<text>{{item.name}}</text>
				<text v-if="item.children.length" @click="$set(item,'isShow',!item.isShow)">查看更多</text>
			</view>

			<list v-if="item.isShow" :dataList="item.children"></list>
		</view>
	</view>
</template>

<script>
	import list from '../../components/list.vue'

	export default {
		components: {
			list
		},
		data() {
			return {
				dataList: []
			}
		},
		created() {
			this.getData();
		},
		methods: {
			getData() {
				this.dataList = [{
						isShow: false,
						name: '1',
						children: [{
							isShow: false,
							name: '11',
							children: [{
								isShow: false,
								name: '111',
								children: []
							}]
						}, {
							isShow: false,
							name: '12',
							children: []
						}]
					},
					{
						isShow: false,
						name: '2',
						children: [{
							isShow: false,
							name: '21',
							children: []
						}]
					}
				]
			}
		}
	}
</script>

<style lang="less" scoped>
	.item {
		margin: 12px;
		width: calc(100% - 24px);
	}

	.level-layout {
		background-color: #FFFFFF;
		padding: 0 16px 0 16px;
		height: 60px;
		border-radius: 8px;
		display: flex;
		justify-content: space-between;
		line-height: 60px;
	}
</style>

下面是效果图