uni-app 没有树形插件吗

在uni-app中，虽然官方没有直接提供一个现成的树形插件，但你可以通过自定义组件和递归渲染的方式来实现树形结构。以下是一个简单的示例，展示了如何在uni-app中创建一个基本的树形组件。

1. 创建树形组件（TreeComponent.vue）

<template>
  <view class="tree">
    <view v-for="(node, index) in nodes" :key="index" class="tree-node">
      <text @click="toggle(node)">{{ node.label }}</text>
      <view v-if="node.expanded" class="tree-children">
        <tree-component v-if="node.children" :nodes="node.children" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TreeComponent',
  props: {
    nodes: {
      type: Array,
      required: true
    }
  },
  methods: {
    toggle(node) {
      node.expanded = !node.expanded;
    }
  }
};
</script>

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

2. 使用树形组件（App.vue）

<template>
  <view>
    <tree-component :nodes="treeData" />
  </view>
</template>

<script>
import TreeComponent from './components/TreeComponent.vue';

export default {
  components: {
    TreeComponent
  },
  data() {
    return {
      treeData: [
        {
          label: 'Node 1',
          expanded: false,
          children: [
            { label: 'Child 1-1', expanded: false, children: [] },
            { label: 'Child 1-2', expanded: false, children: [] }
          ]
        },
        {
          label: 'Node 2',
          expanded: false,
          children: [
            { label: 'Child 2-1', expanded: false, children: [] }
          ]
        }
      ]
    };
  }
};
</script>

<style>
/* Add any global styles here */
</style>

3. 说明

• TreeComponent.vue 是一个递归组件，用于渲染树形结构。它接收一个 nodes 属性，该属性是一个包含树节点数据的数组。
• 每个节点对象包含 label（节点标签）、expanded（是否展开）和 children（子节点数组）属性。
• 通过点击节点标签，可以调用 toggle 方法来展开或收起子节点。
• App.vue 中定义了树形数据 treeData 并使用了 TreeComponent 组件来渲染树形结构。

这个示例提供了一个基本的树形结构实现，你可以根据需求进一步扩展和优化，比如添加图标、样式、动画效果等。