uniapp中tki-tree树形选择器的实战应用与优化技巧

原创

于 2026-02-25 01:14:09 发布 · 643 阅读

标签

1. 从零开始：在uni-app项目中引入tki-tree组件

如果你正在开发一个uni-app应用，需要让用户从一堆有层级关系的数据里做选择，比如选个地区、选个部门、或者选个商品分类，那你大概率需要一个树形选择器。原生uni-app的picker组件搞不定这种嵌套结构，这时候，社区里一个叫tki-tree的组件就成了很多开发者的救星。我最早用这个组件是在一个后台管理项目里，需要让管理员按公司组织架构选择员工，数据层级深、节点多，试了好几个方案，最后tki-tree以它相对简单的配置和不错的灵活性胜出。

不过，直接从插件市场下载下来就用，可能会遇到一些小坑。比如文档看起来有点简略，一些高级用法得自己摸索。这篇文章，我就结合自己踩过的坑和优化经验，带你从安装配置到性能调优，完整地玩转这个组件。

首先，你得找到它。在DCloud的插件市场搜索“tki-tree”，认准那个叫“树形选择器增强版”的，作者是“kujian”。把它导入到你的HBuilder X项目中。这里有个小细节，插件市场提供了两种导入方式：直接下载ZIP包解压，或者通过uni_modules。我个人更推荐uni_modules方式，因为管理更新和依赖会更方便。在你的uni-app项目根目录，找到并打开pages.json，在"easycom"节点下（如果没有就手动加一个），确保包含了这样的配置：

"easycom": {
  "autoscan": true,
  "custom": {
    "^tki-(.*)": "@/uni_modules/tki-$1/tki-$1.vue"
  }
}

这样配置后，你就可以在任意页面的template里直接使用<tki-tree>标签，不用再手动import和components里注册了，非常省事。这就是easycom的魔力，也是uni-app开发的一大便利。

接下来，我们得准备数据。tki-tree要求的数据格式是标准的树形结构，每个节点是一个对象，必须有唯一的id和一个用于显示的name（这个字段名可以自定义）。如果这个节点有子节点，那就用一个children数组把它们包起来。我一般会从后端API拿到扁平化或者带有parentId的数据，然后在前端用一个递归函数转换成树形。这里给你一个我常用的转换函数，你可以放在项目的utils目录下：

// utils/treeUtil.js
export function buildTree(list, idKey = 'id', parentKey = 'parentId', childrenKey = 'children') {
  const map = {};
  const roots = [];
  // 第一遍，建立id到节点的映射
  list.forEach(item => {
    map[item[idKey]] = { ...item, [childrenKey]: [] };
  });
  // 第二遍，构建树
  list.forEach(item => {
    const node = map[item[idKey]];
    const parentId = item[parentKey];
    if (parentId && map[parentId]) {
      // 找到父节点，把自己加进去
      map[parentId][childrenKey].push(node);
    } else {
      // 没有父节点或父节点不存在，自己就是根节点
      roots.push(node);
    }
  });
  return roots;
}

有了这个工具函数，无论后端给你什么格式的数据，你都能轻松地转换成tki-tree需要的模样。数据准备好了，组件也引入了，一个最基本的树形选择器就可以跑起来了。