uniapp Tree形菜单

父组件

<template>
	<view class="bg">
        <tree-menu v-for="item in treeData" :key="item.id" :item="item"></tree-menu>
	</view>
</template>

<script>
import TreeMenu from '../study/treeMenu/treeMenu.vue'
export default {
	name: 'Study',
	components: {
		TreeMenu
	},
	data() {
		return {
			treeData: [
				{
					id: 1,
					name: 'Node 1',
					children: [
						{
							id: 2,
							name: 'Node 1.1',
							children: [
								{
									id: 3,
									name: 'Node 1.1.1',
									children: []
								}
							]
						},
						{
							id: 4,
							name: 'Node 1.2',
							children: []
						}
					]
				},
				{
					id: 5,
					name: 'Node 2',
					children: []
				}
			],
}

子组件

<template>

	<view>
		<view  @click.stop="toggleNodes(item)" style="display: flex;align-items: center;justify-content: start;">
			<u-icon name="arrow-left" v-if="!expanded"></u-icon>
			<u-icon name="arrow-down" v-else></u-icon>
			<image style="width:80rpx;height:80rpx;float:left" src="../../../../static/home/new/folder1.png" mode="">
			</image>
			{{ item.name }}
		</view>
		<view :class="expanded == true ? 'expandedStyle' : ''" v-if="item.children && item.children.length && expanded">
			<tree-menu v-for="child in item.children" :key="child.id" :item="child"></tree-menu>
		</view>
	</view>
</template>
  
<script>
export default {
	name: 'TreeMenu',
	props: ['item'],
	data() {
		return {
			expanded: false,
		};
	},
	methods: {
		toggleNodes(item) {
			this.expanded = !this.expanded;
	}
}
</script>
</script>

<style lang="scss" scoped>
.expandedStyle {
	margin-left: 20px;
}
</style>