更新记录

1.0.1（2025-11-19） 下载此版本

增加截图，完善多选

1.0.0（2025-11-19） 下载此版本

市场上实在找不到我想要的，树形选择控件，即支持回显、虚拟列表海量数据支持、懒加载、等等。用AI写了一个组件，基本上element-plus Tree V2 虚拟化树形控件有的功能这个组件都有。

平台兼容性

uni-app(3.6.14)

uni-app x(3.7.6)

zzh-virtual-treeselect

介绍

zzh-virtual-treeselect 是一个基于 uni-app 的虚拟树形选择组件，包含两个核心组件：

1. zzh-virtual-picker - 底层核心虚拟滚动树形选择器
2. zzh-virtual-treeselect - 带选择框的高级包装组件

该组件集成了虚拟滚动技术，能够高效渲染大量树形数据，同时提供了丰富的交互功能和良好的用户体验。

特点

zzh-virtual-picker (核心选择器)

• 🚀 虚拟滚动：支持大量数据渲染，性能优异
• 🔄 双向绑定：支持 v-model 双向数据绑定
• 🔘 多种选择模式：支持单选和多选
• 📂 树形结构：支持无限层级树形数据展示
• 🎯 节点状态：支持禁用、展开/折叠状态
• ⚡ 懒加载：支持异步加载子节点数据
• 🔍 搜索过滤：内置搜索功能，支持数据过滤
• 🎨 插槽自定义：支持自定义节点渲染
• 🌿 叶子节点限制：可限制只能选择叶子节点
• 📱 跨平台：支持 H5、App、小程序等多端运行

zzh-virtual-treeselect (选择框包装组件)

• 🎨 友好界面：提供类似 Select 的选择框界面
• 🏷️ 标签显示：多选时以标签形式展示选中项
• 🔍 缩略显示：标签过多时自动缩略显示 (+N)
• 🧹 一键清除：支持清除已选项
• 🚫 禁用状态：支持禁用状态
• 🔗 无缝集成：基于 zzh-virtual-picker 构建
• 🔄 双向绑定：支持 v-model 双向数据绑定
• 📱 跨平台：支持 H5、App、小程序等多端运行

zzh-virtual-picker Props

zzh-virtual-picker Slots

zzh-virtual-picker Events

zzh-virtual-treeselect Props

zzh-virtual-treeselect Slots

zzh-virtual-treeselect Events

使用示例

1. 基础用法 (zzh-virtual-treeselect)

<template>
  <view>
    <!-- 基础单选 -->
    <zzh-virtual-treeselect
      v-model="selectedValue"
      :data="treeData"
      placeholder="请选择"
    />

    <!-- 多选 -->
    <zzh-virtual-treeselect
      v-model="selectedValues"
      :data="treeData"
      multiple
      placeholder="请选择多项"
    />

    <!-- 可清除的单选 -->
    <zzh-virtual-treeselect
      v-model="selectedValue2"
      :data="treeData"
      placeholder="请选择"
      clearable
    />

    <!-- 多选带标签限制 -->
    <zzh-virtual-treeselect
      v-model="selectedValues2"
      :data="treeData"
      multiple
      placeholder="请选择（最多显示2个标签）"
      :max-tag-count="2"
      clearable
    />

    <!-- 禁用状态 -->
    <zzh-virtual-treeselect
      v-model="selectedValue3"
      :data="treeData"
      placeholder="禁用状态"
      disabled
    />
  </view>
</template>

<script>
import ZzhVirtualTreeselect from '@/uni_modules/zzh-virtual-treeselect/components/zzh-virtual-treeselect/zzh-virtual-treeselect.vue'

export default {
  components: {
    ZzhVirtualTreeselect
  },
  data() {
    return {
      selectedValue: null,
      selectedValues: [],
      selectedValue2: null,
      selectedValues2: [],
      selectedValue3: null,
      treeData: [
        {
          id: 1,
          label: '一级节点1',
          children: [
            {
              id: 2,
              label: '二级节点1-1',
              children: [
                { id: 3, label: '三级节点1-1-1' },
                { id: 4, label: '三级节点1-1-2' }
              ]
            },
            { id: 5, label: '二级节点1-2' }
          ]
        },
        {
          id: 6,
          label: '一级节点2',
          children: [
            { id: 7, label: '二级节点2-1' },
            { id: 8, label: '二级节点2-2' }
          ]
        }
      ]
    }
  }
}
</script>

2. 高级用法 (zzh-virtual-picker)

<template>
  <view>
    <!-- 自定义触发器 -->
    <zzh-virtual-picker
      v-model="selectedValues"
      :data="treeData"
      :show.sync="showPicker"
      title="请选择节点"
      check-type="checkbox"
      :show-search="true"
      search-placeholder="搜索节点"
      :lazy="true"
      :load="loadNode"
    >
      <!-- 自定义触发器 -->
      <template #trigger>
        <button @click="showPicker = true">选择节点</button>
      </template>

      <!-- 自定义节点内容 -->
      <template #node="{ node, level }">
        <text style="color: #007AFF;">{{ node.label }} (层级: {{ level }})</text>
      </template>
    </zzh-virtual-picker>

    <!-- 显示选中结果 -->
    <view style="margin-top: 20px;">
      <text>选中节点: {{ selectedValues }}</text>
    </view>
  </view>
</template>

<script>
import ZzhVirtualPicker from '@/uni_modules/zzh-virtual-treeselect/components/zzh-virtual-picker/zzh-virtual-picker.vue'

export default {
  components: {
    ZzhVirtualPicker
  },
  data() {
    return {
      showPicker: false,
      selectedValues: [],
      treeData: [
        {
          id: 1,
          label: '根节点1',
          isLeaf: false
        },
        {
          id: 2,
          label: '根节点2',
          isLeaf: false
        }
      ]
    }
  },
  methods: {
    // 懒加载子节点
    loadNode(node) {
      return new Promise(resolve => {
        setTimeout(() => {
          const children = [
            { id: `${node.id}-1`, label: `${node.label}-子节点1`, isLeaf: true },
            { id: `${node.id}-2`, label: `${node.label}-子节点2`, isLeaf: true }
          ]
          resolve(children)
        }, 1000)
      })
    }
  }
}
</script>

3. 仅叶子节点可选

<template>
  <view>
    <zzh-virtual-treeselect
      v-model="selectedValue"
      :data="treeData"
      placeholder="只能选择叶子节点"
      :check-leaf-only="true"
    />
  </view>
</template>

<script>
import ZzhVirtualTreeselect from '@/uni_modules/zzh-virtual-treeselect/components/zzh-virtual-treeselect/zzh-virtual-treeselect.vue'

export default {
  components: {
    ZzhVirtualTreeselect
  },
  data() {
    return {
      selectedValue: null,
      treeData: [
        {
          id: 1,
          label: '父节点1',
          children: [
            { id: 2, label: '叶子节点1-1' },
            { id: 3, label: '叶子节点1-2' }
          ]
        }
      ]
    }
  }
}
</script>

注意事项

1. 性能优化：虚拟滚动适用于大量数据场景，小量数据可考虑使用普通树形组件
2. 数据结构：确保数据结构符合要求，id 字段唯一
3. 懒加载：使用懒加载时，需要正确实现 load 方法并返回 Promise
4. 跨平台兼容：组件已适配 H5、App、小程序等平台
5. Vue 版本：组件兼容 Vue 2 和 Vue 3，使用 model 选项确保 v-model 正常工作