uniapp 省、市、区、乡镇 数据层级选择插件 Ba-DataPicker

Ba-DataPicker 是一款uniapp数据层级选择弹窗插件。支持省市区乡四级；支持自定义数据。

• 支持省、市、区、乡镇四级
• 支持自定义数据
• 支持字母检索

截图展示

---

支持定制、本地包、源码等，有建议和需要，请点击文章结尾“Uniapp插件开发”联系我（如下图）

也可关注博客，实时更新最新插件：

uniapp 常用原生插件大全

---

使用方法

在 script 中引入组件

	const dataPicker = uni.requireNativePlugin('Ba-DataPicker')

默认数据使用

在 script 中调用

	export default {
		data() {
			return {
				msgList: []
			}
		},
		methods: {
			onShowDataPicker() { //显示数据选择弹窗
				dataPicker.show({},
					(res) => {
						this.showResult(JSON.stringify(res))
						if (res.action) {
							if (res.action == "onChecked") { 
								//监听事件：点击选择
							} else if (res.action == "onClickOk") {
								//监听事件：点击确认
								//res.checkeds中是选中的数据
							} else if (res.action == "onClickCancel") {
								//监听事件：点击取消
							}
						}
					});
			},
			showResult(msg) {
				console.log(msg)
				this.msgList.unshift(msg)
				uni.showToast({
					title: msg,
					icon: "none",
					duration: 3000
				})
			}
		}
	}

自定义数据使用

在 script 中调用

	export default {
		data() {
			return {
				options: {//数据参数
					isDefaultData:false,//不使用默认数据
					list: [ //多级数据
						[{
							"name": "浙江省"
						}, {
							"name": "浙江省2"
						}], //第一级数据
						[{
							"name": "宁波市"
						}, {
							"name": "宁波市2"
						}], //第二级数据
						[{
							"name": "象山县"
						}, {
							"name": "象山县2"
						}], //第三级数据
						[{
							"name": "石浦镇"
						}, {
							"name": "石浦镇2"
						}] //第四级数据
					],
					checkedList: [0, 0, 0, 0]//各级已选中的下标
				},
				tabIndex: 0,//多层面板显示位置
				msgList: []
			}
		},
		methods: {
			onShowDataPicker() { //显示数据选择弹窗
				dataPicker.show(this.options,
					(res) => {
						this.showResult(JSON.stringify(res))
						if (res.action) {
							if (res.action == "onChecked") { //监听事件：点击选择
							//如下是根据需求调好的处理逻辑，也可根据情况自行更改
								try {
									let tabIndex = res.tabIndex;//操作的层级
									this.options.checkedList[tabIndex] = res.checkedPosition;//某一层级的选中（下标）
									if (tabIndex < this.options.list.length - 1) {//如果不是最后层级，处理下级数据，并自动跳转下一级
										for (var i = tabIndex + 1; i < this.options.list.length; i++) {
											//下级数据默认选择第一个
											this.options.checkedList[i] = 0;
											//模拟下级数据更新，可在这里调用接口（这里模拟的是添加一个）
											//设置i层级新的数据：this.options.list[i]=新的数据
											this.options.list[i].unshift({
												name: "新数据"
											})
										}
									}
									//自动显示下一级
									if (tabIndex < this.options.list.length - 1)
										this.tabIndex = tabIndex + 1
									//调用刷新数据
									this.onUpdateData(this.options)
								} catch (e) {
									this.showResult("error " + e.message)
								}
							} else if (res.action == "onClickOk") { //监听事件：点击确认
								//res.checkeds中是选中的数据
							} else if (res.action == "onClickCancel") { //监听事件：点击取消
						
							}
						}
					});
			},
			onUpdateData(options) {//更新数据
				options.tabIndex = this.tabIndex;
				dataPicker.update(options,
					(res) => {
						//this.showResult(JSON.stringify(res))
					});
			},
			showResult(msg) {
				console.log(msg)
				this.msgList.unshift(msg)
				uni.showToast({
					title: msg,
					icon: "none",
					duration: 3000
				})
			}
		}
	}

方法清单

名称	说明
show	加载并显示弹窗
update	更新数据