更新记录

0.0.7（2026-07-22） 下载此版本

首次发布

• 支持展开/收起、单选/多选、父子联动
• 支持禁用节点、v-model、checked、goChild、updated
• 支持搜索过滤、关键词高亮、懒加载和虚拟渲染
• 支持微信小程序、支付宝小程序和 H5

平台兼容性

uni-app(4.15)

uni-tree-view

适用于 uni-app + Vue 3 的跨端树形列表/选择组件，一套代码运行在微信小程序、支付宝小程序和 H5。

📖 完整文档 · 快速上手 · API 参考 · 常见问题

特性

• 🌲 展开收起、单选/多选、父子联动、严格模式、禁用节点
• 🔍 关键词过滤、自定义匹配、命中高亮
• ⚡ 固定行高虚拟渲染，万级节点流畅滚动
• 🔌 懒加载子节点，内置加载态与失败重试
• 🎨 主题色一个 prop 搞定，label/icon/append/empty 插槽自由定制
• 📦 零运行时依赖，npm 与 uni_modules（插件市场）双通道分发

安装

pnpm add uni-tree-view

或在 DCloud 插件市场 导入插件 KieranYin9527-tree（显示名称：keryin-tree-view，easycom 免配置）。

使用

<template>
  <uni-tree-view
    v-model="checkedValue"
    show-checkbox
    multiple
    :data="treeData"
    @change="handleChange"
  />
</template>

<script setup>
import UniTreeView from "uni-tree-view";
import { ref } from "vue";

const checkedValue = ref([]);
const treeData = [
  {
    id: "building-a",
    label: "A 栋",
    children: [
      { id: "floor-a-1", label: "1 层" },
      { id: "floor-a-2", label: "2 层", disabled: true }
    ]
  }
];

function handleChange({ keys, nodes }) {
  console.log("当前选中:", keys);
}
</script>

showCheckbox 控制是否启用选择，multiple 控制单选/多选：

完整的 Props / Events / Slots / Methods 列表、懒加载与虚拟渲染示例请见 文档站。

平台兼容性

实现层面的兼容性说明（hover-class、内联 iconfont、scroll-view 虚拟滚动等）见 平台兼容性文档。

开发

pnpm install
pnpm play        # H5 playground
pnpm test        # 单元测试
pnpm build       # 构建组件包
pnpm docs        # 本地文档站

贡献前请阅读 CONTRIBUTING.md。

License

MIT © OFreshman