Vent-App/pages/home/devicemenu/treeMenu/treeMenu.vue

 
<template>
 
	<view>
		<view  @click="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"  mode="">
			</image>
			{{ item.name }}
		</view>
		<view  @click="clickNodes(item)" :class="expanded == true ? 'expandedStyle' : ''" v-if="item.children && item.children.length && expanded">
			<tree-menu  @click="clickNodes(child)" 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: true,
		};
	},
	methods: {
		toggleNodes(item) {
			this.expanded = !this.expanded;
		},
		clickNodes(item) {
			this.$emit("menuClick",item.id)
		},
	}
}
</script>
 
<style lang="scss" scoped>
.expandedStyle {
	margin-left: 20px;
}
</style>