uni-data-picker 是 DCloud 官方提供的 UniApp UI 组件库（uni-ui）中的一个数据驱动型级联选择器，适用于省市区、部门、分类等多层级数据的选择场景。它支持本地数据（localdata）和云端数据（通过 collection 连接 uniCloud 数据库），并具备懒加载、搜索、动态加载等能力。

1. 安装

在 HBuilderX 中： 

• 在插件市场中搜索 uni-data-picker，点击“导入到项目”https://ext.dcloud.net.cn/plugin?id=3796
• 注意：使用 uniCloud 数据时需部署对应数据表（如 opendb-city-china）

二、基本用法

场景 1：使用本地数据（localdata）

<template>
	<view class="container">
		<uni-data-picker v-model="city" :localdata="cityData" placeholder="请选择" @change="onCityChange">
		</uni-data-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityData: [{
					text: '广东省',
					value: '广东省',
					children: [{
						text: '广州市',
						value: '广州市',
						children: [{
							text: '越秀区',
							value: '越秀区'
						}, {
							text: '天河',
							value: '天河区'
						}]
					}]
				}]
			}
		},
		methods: {
			onCityChange(e) {
				console.log('选中的城市路径:', e.detail.value);
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
	}
</style>

效果如下：