更新记录

2.0.2（2025-11-11） 下载此版本

### 

2.0.1（2025-11-11） 下载此版本

2.0.0（2025-10-29） 下载此版本

2.0.0（2025-10-29）

## [2.0.0] - 2025-10-29
### 

平台兼容性

uni-app(3.6.14)

uni-app x(3.6.14)

其他

hy-tree-select-plus v2.0.0

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

🎯 核心特性

主要功能

• ✨ 虚拟列表渲染：支持 10 万+ 节点数据流畅滚动，性能提升 50%
• 🎨 多种选择模式：支持单选、多选（关联下级/独立选择）
• 🔍 智能搜索过滤：实时搜索、模糊匹配、高亮结果、评分排序
• ⚡ 异步懒加载：支持动态加载子节点，按需请求数据
• 🎭 自定义节点：完整的插槽支持，可自由定制节点内容
• 🎯 拖拽排序：支持节点拖拽重排（可选）
• 🌈 主题适配：支持暗黑模式自动适配
• 📱 多端兼容：支持 Vue2、Vue3、nvue，全平台适配
• 💪 TypeScript：提供完整的类型定义

v2.0.0 新增特性

• 🛠️ 工具栏：一键展开/收起、清空选择等快捷操作
• 🎨 全新UI：更加现代化、美观的界面设计
• ⚙️ 高级搜索：支持模糊匹配、区分大小写等高级选项
• 💡 状态高亮：当前选中节点高亮显示
• 📦 默认状态：支持设置默认展开和选中的节点
• 🎯 更多事件：新增 10+ 个事件钩子，满足各种业务场景

基础示例

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

<script>
export default {
  data() {
    return {
      selectedValues: [],
      treeData: [
        {
          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: {
    onChange(values, nodes) {
      console.log('选择的值:', values);
      console.log('选择的节点:', nodes);
    }
  }
};
</script>

📖 API 文档

Props 属性

Events 事件

Methods 方法

通过 ref 调用组件方法：

// 获取组件实例
const treeRef = this.$refs.tree;

// 展开所有节点
treeRef.expandAll();

// 收起所有节点
treeRef.collapseAll();

// 清空所有选择
treeRef.clearAll();

// 获取选中的节点
const nodes = treeRef.getCheckedNodes();

// 获取选中的值
const values = treeRef.getCheckedValues();

// 设置展开的节点
treeRef.setExpandedKeys([1, 2, 3]);

// 设置选中的节点
treeRef.setCheckedKeys([4, 5, 6]);

// 滚动到指定节点
treeRef.scrollToNode(10);

// 查找节点
const path = treeRef.findNode(5);

数据格式

const treeData = [
  {
    id: 1,                    // 唯一标识（必填）
    label: '节点名称',         // 显示文本（必填）
    children: [],             // 子节点数组
    disabled: false,          // 是否禁用
    isLeaf: false,           // 是否为叶子节点（懒加载用）
    expanded: false,         // 是否展开
    checked: false,          // 是否选中
    selected: false,         // 是否被选择（单选）
    loading: false,          // 是否加载中
    loaded: false,           // 是否已加载（懒加载用）
    // 自定义字段...
  }
];

🚀 高级功能示例

1. 虚拟列表 - 大数据渲染

<hy-tree-select-plus 
  v-model="selected"
  :data="largeTreeData"
  :multiple="true"
  :virtual-list="true"
  :node-height="44"
  height="500px"
/>

2. 异步懒加载

<template>
  <hy-tree-select-plus 
    v-model="selected"
    :data="lazyData"
    :load-data="loadNodeData"
    @load-success="onLoadSuccess"
    @load-error="onLoadError"
  />
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      lazyData: [
        { id: 1, label: '节点1', isLeaf: false },
        { id: 2, label: '节点2', isLeaf: false }
      ]
    };
  },

  methods: {
    async loadNodeData(node) {
      // 模拟异步请求
      const response = await uni.request({
        url: '/api/tree/children',
        data: { parentId: node.id }
      });
      return response.data;
    },

    onLoadSuccess(node, children) {
      console.log('加载成功:', node, children);
    },

    onLoadError(node, error) {
      console.error('加载失败:', error);
    }
  }
};
</script>

3. 自定义搜索过滤

<template>
  <hy-tree-select-plus 
    v-model="selected"
    :data="treeData"
    :filter-method="customFilter"
    :advanced-search="true"
  />
</template>

<script>
export default {
  methods: {
    // 自定义搜索算法
    customFilter(node, keyword) {
      // 支持拼音搜索等自定义逻辑
      const pinyin = this.getPinyin(node.label);
      return node.label.includes(keyword) || pinyin.includes(keyword);
    },

    getPinyin(text) {
      // 拼音转换逻辑
      return text;
    }
  }
};
</script>

4. 自定义节点内容

<template>
  <hy-tree-select-plus 
    v-model="selected"
    :data="customData"
    :multiple="true"
  >
    <template #default="{ node }">
      <view class="custom-node">
        <image :src="node.icon" class="node-icon" />
        <view class="node-info">
          <text class="node-name">{{ node.label }}</text>
          <text class="node-desc">{{ node.description }}</text>
        </view>
        <view class="node-badge" v-if="node.count">
          {{ node.count }}
        </view>
      </view>
    </template>
  </hy-tree-select-plus>
</template>

<style>
.custom-node {
  display: flex;
  align-items: center;
  padding: 10rpx 0;
}

.node-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
}

.node-info {
  flex: 1;
}

.node-name {
  font-size: 28rpx;
  color: #333;
}

.node-desc {
  font-size: 22rpx;
  color: #999;
}

.node-badge {
  background-color: #ff4d4f;
  color: #fff;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  font-size: 20rpx;
}
</style>

5. 默认展开和选中

<hy-tree-select-plus 
  v-model="selected"
  :data="treeData"
  :default-expand-all="true"
  :default-expanded-keys="[1, 2, 3]"
  :default-checked-keys="[4, 5]"
/>

🎨 主题定制

组件支持暗黑模式自动适配，也可以通过覆盖 CSS 变量来自定义主题：

.hy-tree-select-plus {
  --primary-color: #667eea;
  --text-color: #333;
  --border-color: #e0e0e0;
  --hover-bg: #f9f9f9;
  --disabled-color: #ccc;
}

⚡ 性能优化建议

1. 大数据场景：建议开启虚拟列表 virtual-list="true"
2. 懒加载：对于超大型树结构，使用 load-data 实现按需加载
3. 搜索优化：合理使用 filter-method 自定义搜索算法
4. 避免深层嵌套：建议树的深度不超过 5 层
5. 节点数量：单次渲染建议不超过 1000 个节点（虚拟列表除外）

🐛 常见问题

Q: 虚拟列表滚动时出现闪烁？

A: 确保设置了正确的 node-height，且所有节点高度一致。

Q: 搜索后展开状态丢失？

A: v2.0.0 已修复此问题，搜索时会自动展开包含匹配项的父节点。

Q: 懒加载失败如何重试？

A: 组件会保留展开状态，用户可以再次点击重新加载。

Q: 如何实现级联选择？

A: 设置 check-strictly="false" 即可实现父子节点联动。

Q: 支持拖拽排序吗？

A: v2.0.0 新增了拖拽功能，设置 draggable="true" 启用。

Made with ❤️ by HY Team