更新记录

1.0.0（2025-09-25） 下载此版本

## [1.0.0] - 2025-09-25
### Added
-   初次发布。
-   虚拟列表渲染：支持10万+节点数据流畅滚动
-   多种选择模式：单选、多选（关联下级/任意项）
-   智能搜索过滤：实时搜索，高亮匹配结果
-   异步数据加载：支持动态加载子节点
-   完整TypeScript支持：提供完整的类型定义
-   多端兼容：支持Vue2、Vue3、nvue

平台兼容性

uni-app(3.6.5)

uni-app x(3.6.5)

其他

hy-tree-select-plus

hy-tree-select-plus 是一个基于虚拟列表技术的高性能树形选择组件，支持海量数据流畅渲染、单选/多选、搜索过滤、异步加载等功能，特别适合需要处理大型组织架构、分类目录等场景的uni-app应用.

🎯 核心功能设计

主要特性

虚拟列表渲染：支持10万+节点数据流畅滚动
多种选择模式：单选、多选（关联下级/任意项）
智能搜索过滤：实时搜索，高亮匹配结果
异步数据加载：支持动态加载子节点
完整TypeScript支持：提供完整的类型定义
多端兼容：支持Vue2、Vue3、nvue

基础示例

<template>
  <view class="container">
    <hy-tree-select-plus
      v-model="selectedDepartments"
      :data="departmentTree"
      :multiple="true"
      :searchable="true"
      height="500px"
      placeholder="请选择部门"
      @change="onDepartmentChange"
    />

    <view class="selected-info">
      <text>已选择: {{ selectedDepartments.length }} 个部门</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDepartments: [],
      departmentTree: [
        {
          id: 1,
          label: '总公司',
          children: [
            {
              id: 2,
              label: '技术部',
              children: [
                { id: 3, label: '前端组' },
                { id: 4, label: '后端组' },
                { id: 5, label: '运维组' }
              ]
            },
            {
              id: 6,
              label: '市场部',
              children: [
                { id: 7, label: '推广组' },
                { id: 8, label: '渠道组' }
              ]
            }
          ]
        }
      ]
    };
  },

  methods: {
    onDepartmentChange(selectedValues, selectedNodes) {
      console.log('选择的部门:', selectedValues);
      console.log('选择的节点:', selectedNodes);
    }
  }
};
</script>

API 文档

Props 属性

属性名         类型               默认值                 说明
modelValue      Array/String/Number   -                 绑定值
data            Array                []                 树形数据
multiple        Boolean              false              是否多选
checkStrictly   Boolean              false              是否严格模式
searchable      Boolean              true               是否可搜索
virtualList     Boolean              true               是否使用虚拟列表
height          String               '400px'            容器高度
placeholder     String               '请输入关键词搜索' 搜索框占位符
emptyText       String               '暂无数据'         空状态文本

Events 事件

事件名 参数           说明
change  (value, nodes)  值变化时触发
select  (node)          选择节点时触发
expand  (node)          展开/收起节点时触发

Methods 方法

通过 ref 调用组件方法：

// 获取选中的节点
this.$refs.tree.getCheckedNodes()

// 展开所有节点
this.$refs.tree.expandAll()

// 搜索节点
this.$refs.tree.search('关键词')

🚀 高级功能示例

异步加载数据

// 异步加载函数
async loadDepartmentData(node) {
  try {
    node.loading = true;
    const response = await uni.request({
      url: '/api/departments',
      data: { parentId: node.id }
    });

    node.children = response.data;
    node.loading = false;

    return response.data;
  } catch (error) {
    node.loading = false;
    throw error;
  }
}

// 在组件中使用
<hy-tree-select-plus 
  :load-data="loadDepartmentData"
/>

自定义搜索过滤

// 自定义搜索算法
const customFilter = (node, keyword) => {
  // 支持拼音搜索
  const pinyin = this.getPinyin(node.label);
  return node.label.includes(keyword) || pinyin.includes(keyword);
};

<hy-tree-select-plus 
  :filter-method="customFilter"
/>