uniapp实战：tki-tree树形选择器从安装到多选配置全流程（附省市联动案例）

从零到一：在uni-app中构建高性能树形选择器与省市联动实战

如果你正在开发一个需要用户选择地区、组织架构或者任何层级数据的uni-app应用，那么一个直观、高效的树形选择器几乎是必不可少的。市面上虽然有不少UI库，但针对uni-app生态，尤其是追求轻量、易用和原生体验的开发者来说，tki-tree组件是一个绕不开的选择。它不是官方组件，却在插件市场积累了相当高的人气，原因无他：功能专一、配置灵活、上手快。

今天，我们不打算照本宣科地复述文档。我将以一个实际项目中的“省市县三级联动选择”需求为蓝本，带你完整地走一遍从组件引入、基础配置、到实现复杂交互的全过程。过程中，我会分享一些官方文档里没写的“坑点”和性能优化的小技巧，这些经验大多来自我真实项目中的踩坑记录。无论你是刚接触uni-app的新手，还是正在寻找更优树形组件方案的开发者，这篇文章都能给你提供一条清晰的实践路径。

1. 项目初始化与组件引入：打好地基

在开始写代码之前，我们需要明确环境。假设你已经创建好了一个uni-app项目（无论是HBuilderX创建的还是cli创建的）。tki-tree是一个第三方组件，我们需要手动将其集成到项目中。

1.1 获取组件资源

首先，前往DCloud插件市场，搜索“tki-tree”。找到组件后，通常有两种引入方式：通过HBuilderX直接导入插件，或手动下载源码。对于追求项目结构清晰和版本控制的我来说，更推荐手动下载。

将下载的组件包解压，你会看到一个包含tki-tree.vue及可能附带样式文件的文件夹。在项目的components目录下（如果没有，可以创建一个），新建一个名为tki-tree的文件夹，将解压的所有文件放入其中。这样，组件就成为了你项目源码的一部分，便于管理和自定义修改。

注意：直接使用HBuilderX导入插件虽然方便，但有时在自定义主题或深度调整样式时会遇到路径问题。手动引入让你对组件的依赖关系一目了然。

1.2 在页面中注册并使用组件

接下来，我们需要在具体的页面中引入并注册这个组件。假设我们正在开发一个用户信息编辑页面，其中需要选择所属地区。

在你的页面Vue文件（例如 edit-user.vue）的 <script> 部分，进行如下操作：

<script>
// 1. 导入组件
import tkiTree from '@/components/tki-tree/tki-tree.vue'

export default {
  // 2. 注册组件
  components: {
    tkiTree
  },
  data() {
    return {
      // 3. 准备绑定给树形组件的数据
      areaTreeData: [],
      // 用于存储最终选择结果的变量
      selectedArea: {
        province: '',
        city: '',
        district: ''
      }
    }
  },
  onLoad() {
    // 页面加载时初始化树数据
    this.initAreaData()
  },
  methods: {
    initAreaData() {
      // 这里先模拟静态数据，实际项目中通常从后端API获取
      this.areaTreeData = [
        {
          id: '110000',
          name: '北京市',
          children: [
            { id: '110100', name: '北京市辖区', children: [
              { id: '110101', name: '东城区' },
              { id: '110102', name: '西城区' }
              // ... 其他区
            ]}
          ]
        },
        {
          id: '310000',
          name: '上海市',
          children: [
            { id: '310100', name: '上海市辖区', children: [
              { id: '310101', name: '黄浦区' },
              { id: '310104', name: '徐汇区' }
            ]}
          ]
        }
        // ... 其他省份
      ]
    }
  }
}
</script>

在 <template> 部分，放置组件标签：

<template>
  <view class="edit-user">
    <!-- 其他表单元素 -->
    <view class="form-item">
      <text>所在地区：</text>
      <!-- 4. 使用组件，并绑定数据与事件 -->
      <tki-tree
        ref="areaTree"
        :range="areaTreeData"
        rangeKey="name"
        title="请选择省/市/区"
        confirmColor="#007AFF"
        @confirm="onAreaConfirm"
      />
    </view>
  </view>
</templ