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})}}}