uni-app 为什么没有树形菜单

在 uni-app 框架中，原生并没有直接提供树形菜单（Tree Menu）的组件，这是因为 uni-app 是一个使用 Vue.js 开发多端（如小程序、H5、App等）的统一框架，而树形菜单的具体实现往往依赖于具体的业务需求和UI设计，并不属于框架的基础组件范畴。不过，你可以通过自定义组件和递归渲染的方式来实现树形菜单。

下面是一个简单的树形菜单实现示例，基于 Vue.js 的递归组件概念：

<!-- TreeNode.vue -->
<template>
  <div class="tree-node">
    <div @click="toggle" :style="{paddingLeft: `${depth * 20}px`}">
      <span v-if="hasChildren" :class="{expanded: isExpanded}">{{ isExpanded ? '-' : '+' }}</span>
      {{ node.label }}
    </div>
    <div v-if="isExpanded" class="children">
      <tree-node
        v-for="(child, index) in node.children"
        :key="index"
        :node="child"
        :depth="depth + 1"
      ></tree-node>
    </div>
  </div>
</template>

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

<style scoped>
.tree-node {
  cursor: pointer;
}
.expanded {
  font-weight: bold;
}
.children {
  margin-left: 20px;
}
</style>

然后在你的页面组件中使用这个 TreeNode 组件：

<template>
  <view>
    <tree-node :node="treeData" :depth="0"></tree-node>
  </view>
</template>

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

export default {
  components: {
    TreeNode
  },
  data() {
    return {
      treeData: {
        label: 'Root',
        children: [
          { label: 'Child 1' },
          {
            label: 'Child 2',
            children: [
              { label: 'Grandchild 1' },
              { label: 'Grandchild 2' }
            ]
          }
        ]
      }
    };
  }
};
</script>

这个示例展示了如何通过递归组件来实现树形菜单的渲染和展开/收起功能。你可以根据实际需求进一步调整样式和功能。