vue （uniapp）实现无限级树形列表

要在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>