父组件
<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>