当前位置：首页 > uni-app

uniapp树形选择

2026-02-05 16:40:48uni-app

uniapp 树形选择实现方法

在 uniapp 中实现树形选择功能，可以通过以下几种方式：

使用第三方组件 uni-ui 提供了 uni-tree 组件，可以快速实现树形选择功能。安装 uni-ui 后，在页面中引入组件即可使用。

自定义实现 通过递归组件的方式实现树形结构。创建一个子组件用于渲染树节点，父组件通过递归调用子组件来构建整个树形结构。

使用插件市场组件 在 uniapp 插件市场搜索"树形选择"，会有多个现成的组件可供选择，如 tree-select、ztree 等，根据需求选择合适的组件。

使用 uni-tree 组件示例代码

<template>
  <view>
    <uni-tree 
      :data="treeData" 
      show-checkbox 
      @node-click="handleNodeClick"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      treeData: [{
        id: 1,
        label: '一级节点',
        children: [{
          id: 2,
          label: '二级节点'
        }]
      }]
    }
  },
  methods: {
    handleNodeClick(node) {
      console.log('点击节点:', node)
    }
  }
}
</script>

自定义树形组件实现

创建 tree-node 组件：

<!-- components/tree-node.vue -->
<template>
  <view>
    <view @click="toggle">
      {{ node.label }}
    </view>
    <view v-if="isOpen && node.children">
      <tree-node 
        v-for="child in node.children" 
        :key="child.id" 
        :node="child"
      />
    </view>
  </view>
</template>

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

在页面中使用：

<template>
  <view>
    <tree-node 
      v-for="item in treeData" 
      :key="item.id" 
      :node="item"
    />
  </view>
</template>

<script>
import TreeNode from '@/components/tree-node.vue'

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: [/* 树形数据 */]
    }
  }
}
</script>