要在UniApp中实现无限级树形列表,你可以使用组件和递归来实现。以下是一种可能的实现方法:
<!-- TreeItem.vue -->
<template>
<view>
<view @click="toggleNode">{
{
item.name }}</view>
<view v-if="item.children && item.children.length && expanded">
<tree-item v-for="child in item.children" :key="child.id" :item="child"></tree-item>
</view>
</view>
</template>
<script>
export default {
name: 'TreeItem',
props: ['item'],
data() {
return {
expanded: false // 初始状态为折叠
};
},
methods: {
toggleNode() {
this.expanded = !this.expanded; // 切换展开和折叠状态
}
}
}
</script>
<!-- TreeList.vue -->
<template>
<view>
<tree-item v-for="item in treeData" :key="item.id" :item="item"></tree-item>
</view>
</template>
<script>
import TreeItem from '@/components/TreeItem.vue';
export default {
name: 'TreeList',
components: {
TreeItem
},
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: []
}
]
};
}
}
</script>