uni-app 树型菜单组件

在uni-app中实现树型菜单组件，你可以利用递归组件的方式来构建。递归组件是指组件在其模板中调用自身，这种方式非常适合用来处理树形结构的数据。以下是一个简单的树型菜单组件的实现示例：

1. 数据结构

首先，定义一个树形结构的数据，例如：

const treeData = [
  {
    id: 1,
    label: 'Node 1',
    children: [
      {
        id: 2,
        label: 'Node 1-1',
        children: [
          { id: 3, label: 'Node 1-1-1' },
          { id: 4, label: 'Node 1-1-2' }
        ]
      },
      { id: 5, label: 'Node 1-2' }
    ]
  },
  {
    id: 6,
    label: 'Node 2',
    children: [
      { id: 7, label: 'Node 2-1' }
    ]
  }
];

2. 递归组件

创建一个名为TreeNode.vue的组件，用于递归渲染树节点：

<template>
  <view class="tree-node">
    <view @click="toggle">
      <text>{{ node.label }}</text>
      <text v-if="hasChildren">({{ isOpen ? '-' : '+' }})</text>
    </view>
    <view v-if="isOpen && hasChildren" class="children">
      <tree-node
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      ></tree-node>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: Object
  },
  data() {
    return {
      isOpen: false
    };
  },
  computed: {
    hasChildren() {
      return this.node.children && this.node.children.length;
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen;
    }
  }
};
</script>

<style scoped>
.tree-node {
  margin-left: 20px;
}
.children {
  padding-left: 20px;
  border-left: 1px solid #ccc;
}
</style>

3. 使用组件

在你的页面中使用TreeNode组件，并传入树形数据：

<template>
  <view>
    <tree-node :node="treeData[0]"></tree-node> <!-- 传入根节点数据 -->
  </view>
</template>

<script>
import TreeNode from '@/components/TreeNode.vue';

export default {
  components: {
    TreeNode
  },
  data() {
    return {
      treeData: [ /* ... your tree data here ... */ ]
    };
  }
};
</script>

这个示例展示了如何在uni-app中实现一个简单的树型菜单组件。你可以根据实际需求进一步扩展，比如添加节点选择、节点拖拽等功能。