微信小程序,动态设置三级联动, 省市区街道

1.第一步   传parentId=0   查询省份
2.第二步   选择省份,传pathId=选择省份的pathId, 不传parentId,会查询出   市/县数据
3.第三步   根据选择县的parentId 查询街道数据,传parentId=选择的县id
4.选择结果回显   显示所选择的 path 以/分割   取最后一级

  <van-dropdown-menu active-color="#409eff" custom-class="filter-menus"><van-dropdown-item id="areaAll" title="区域选择"><view class="areaBox" style="height:288rpx; overflow:auto;"><van-cell class="van-dropdown-item__option dropdown-time {{item.id === parentId ? 'time-active' : ''}}" wx:for="{{areaAllList}}" wx:key="index" data-item="{{item}}" bindtap="areaClick"><view class="van-cell"><view class="van-dropdown-item__title">{{item.name}}</view></view></van-cell></view><view><van-picker show-toolbar columns='{{columns}}' value-key='name' bind:change='chgArea' bind:confirm='confirmArea' bind:cancel='areaClose' /></view></van-dropdown-item></van-dropdown-menu>

Page({data: {//行政区域areaAllList: [],columns: [// {//   values: '', // one,                    //可以是数组，或者对象数组//   className: 'column1' //选择器的第一列// },// {//   values: '', // two[one[0].name],       //默认选中two对象中的第一项//   className: 'column2', //选择器的第二列// },// {//   values: '', // three[two[one[0].name][0].name],  //默认选中three对象中的第一项//   className: 'column3', //选择器的第三列// }],one: [],two: []}})onLoad(options) {//行政区划   areaAllListthis.getParent() //
},
method:{areaClick(e) {//点击省, 请求市级的数据const item = e.currentTarget.dataset.itemthis.setData({parentId: item.id})this.initPath(item.pathId)},getParent() {//获取顶部的省级fetch.apply.getAreaAll({parentId: 0}, res => {if (res.flag == 0) {this.setData({areaAllList: res.object})}})},initPath(pathId) {// 1写入 选择器第一级 数据 ;  2将二级数据, 做成 columns 的格式,并写入fetch.apply.getAreaAll({pathId: pathId}, res => {if (res.flag == 0 && res.object.length > 0) {var v1 = []res.object.forEach((e, i) => {v1[e.name] = e.childs});this.setData({one: res.object,two: v1,})this.setData({columns: [{values: this.data.one, //可以是数组，或者对象数组className: 'column1', //选择器的第一列},{values: this.data.two[this.data.one[0].name], //默认选中two对象中的第一项className: 'column2', //选择器的第二列defaultIndex: 0},{values: '', // this.data.three[this.data.two[this.data.one[0].name][0].name], //默认选中three对象中的第一项className: 'column3', //选择器的第三列}],})} else {this.setData({one: '',two: '',columns: []})}})},confirmArea(event) {// 确定 选择的地区数据let value = event.detail.valueif (!value[0]) {toast("请选择城市")return}if (!value[2]) {//将选中的文字和对应的id拿出来使用// wx.showModal({//   title: '',//   content: '您选中了“' + value[0].name + ',' + value[1].name + ',' +//     '”, di为“' + value[0].id + ',' + value[1].id +//     ',' + '”',//   showCancel: false// })this.setData({areaPathId: value[1].id})} else {//将选中的文字和对应的id拿出来使用// wx.showModal({//   title: '',//   content: '您选中了“' + value[0].name + ',' + value[1].name + ',' +//     value[2].name + '”, di为“' + value[0].id + ',' + value[1].id +//     ',' + value[2].id + '”',//   showCancel: false// })this.setData({areaPathId: value[2].id})}this.getList()this.areaClose()},chgArea(event) {// 滚动选择器, 通过第二级,获取最后一级, 街道数据let picker = event.detail.pickerlet value = event.detail.valuelet index = event.detail.index//在change 第一列的时候，动态更改第二列的数据//setColumnValues是vant自带的实例方法//第一个参数是列数，从0开始；第二个参数是第二列应该显示的数据picker.setColumnValues(1, this.data.two[value[0].name])//此处vant-picker有一个bug，当只滑动第一级时，返回的value数据是错误的，需要我们自己根据第二 级计算，去获取第三级数据if (index == 0) {// picker.setColumnValues(2, this.data.three[(this.data.two[value[0].name][0]).name])} else if (index == 1) {var v2 = {}fetch.apply.getAreaAll({parentId: value[index].id}, res => {if (res.flag == 0) {v2[value[index].name] = res.objectthis.setData({three: v2})picker.setColumnValues(2, this.data.three[value[1].name])}})} else {picker.setColumnValues(2, this.data.three[value[1].name])}},areaClose() {this.selectComponent('#areaAll').toggle()},
}

技术要点

1 按照固定格式, 设置columns 的数据
2 picker.setColumnValues() 方法,获取数据

columns 的数据 格式

var one = [{ id: 111, 'name': '杭州' },{ id: 222, 'name': '宁波' },
]
var two = {'杭州': [{ id: 11100, 'name': '国杭州' },{ id: 22201, 'name': '国宁波' },],'宁波': [{ id: 11102, 'name': '中杭州' },{ id: 22203, 'name': '中宁波' },{ id: 33304, 'name': '中温州' },]
}
var three = {'国杭州': [{ id: 1110000, 'name': 'aaa' },{ id: 2220101, 'name': 'bbb' },],'国宁波': [{ id: 1110102, 'name': 'ccc' },{ id: 2220103, 'name': 'ddd' },{ id: 3330104, 'name': 'eee' },],'中杭州': [{ id: 1110205, 'name': 'fff' },{ id: 2220206, 'name': 'ggg' },{ id: 3330207, 'name': 'hhh' },],'中宁波': [{ id: 1110308, 'name': 'www' },{ id: 2220309, 'name': 'ttt' },{ id: 3330310, 'name': 'yyy' },],'中温州': [{ id: 1110411, 'name': 'jjj' },{ id: 2220412, 'name': 'kkk' },{ id: 3330413, 'name': 'ppp' },]
}