更新记录

1.0.0（2025-12-31） 下载此版本

• 自定义数据加载函数
• 字段映射配置
• 面包屑导航
• 兼容 H5、微信小程序

平台兼容性

uni-app(4.83)

tree-picker 树形选择器

简洁易用的树形选择器，支持自定义数据加载、字段映射、面包屑导航，零依赖纯原生实现。

平台兼容

✅ H5 ✅ 微信小程序

快速开始

<template>
  <view>
    <button @click="showPicker = true">选择</button>
    <tree-picker v-model:show="showPicker" :loadData="loadData" @select="" />
  </view>
</template>

<script setup>
import { ref } from 'vue';

const showPicker = ref(false);

// 数据加载函数
const loadData = async (parentId) => {
  // parentId 为 null 时加载根节点，否则加载子节点
  const res = await yourApi.getTreeData(parentId);
  return res.data; // 返回数组
};

const  = (item) => {
  console.log('选中:', item);
};
</script>

Props

Events

loadData 函数

参数：parentId - 父节点ID（首次为 null）

返回：Promise，resolve 数据数组

数据格式：

[
  {
    id: '1',           // 节点ID
    name: '广东省',    // 节点名称
    leaf: false,       // 是否叶子节点
    children: []       // 子节点（可选）
  }
]

字段映射

数据字段名不同时可配置映射：

<tree-picker
  v-model:show="showPicker"
  :loadData="loadData"
  idKey="value"
  nameKey="label"
  childrenKey="items"
  leafKey="isLeaf"
/>

完整示例

<template>
  <view class="page">
    <view class="result">
      <text>{{ selectedArea ? selectedArea.name : '未选择' }}</text>
    </view>
    <button @click="showPicker = true">选择地区</button>

    <tree-picker
      v-model:show="showPicker"
      title="选择地区"
      :loadData="loadData"
      @select=""
    />
  </view>
</template>

<script setup>
import { ref } from 'vue';

const showPicker = ref(false);
const selectedArea = ref(null);

const loadData = async (parentId) => {
  // 模拟接口请求
  await new Promise(resolve => setTimeout(resolve, 300));

  if (!parentId) {
    // 返回根节点
    return [
      { id: '1', name: '广东省', leaf: false },
      { id: '2', name: '浙江省', leaf: false }
    ];
  } else if (parentId == '1') {
    // 返回广东省的子节点
    return [
      { id: '11', name: '广州市', leaf: true },
      { id: '12', name: '深圳市', leaf: true }
    ];
  } else if (parentId == '2') {
    // 返回浙江省的子节点
    return [
      { id: '21', name: '杭州市', leaf: true },
      { id: '22', name: '宁波市', leaf: true }
    ];
  }
  return [];
};

const  = (item) => {
  selectedArea.value = item;
};
</script>

注意事项

• loadData 必须返回 Promise
• 叶子节点需设置 leaf: true
• 零依赖，无需安装第三方库

License

MIT