微信小程序 picker实现省市二级联动

最近在开发微信小程序的时候，遇到了一个实现省市二级联动的需求~
按常理来说省市区三级联动比较常见，但是不慌，微信小程序自带的picker组件有个level属性，可以选择层级

但是，很遗憾，这个属性不生效，有好事去社区提问，官方回答是

不得已，小编只能自己实现省市二级联动了
注意这里获取的地址数据，是由请求后端接口获取的
获取的数据格式是这样的

并且需要对获取的数据进行处理

     //dataArr后端请求回来的地址数据
     let arr = [],
        provId
      Object.keys(dataArr).forEach(o => {
        arr.push(dataArr[o].name)
        // 省的初始值
        this.multiArray[0].push(dataArr[o].name)
        if (dataArr[o].name == this.province) {
          provId = dataArr[o].cityList[0].provId
        }
      })
      this.allCityGroup = arr
      this.cityGroup = dataArr
      for (var i = 0; i < dataArr[0].cityList.length; i++) {
        // 市的初始值
        this.multiArray[1].push(dataArr[0].cityList[i].name)
      }

附上html代码

<view class="parent">
        <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
            <view class="picker">
                请选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}
            </view>
        </picker>
    </view>

js代码

  // 省市全部选择完
    bindMultiPickerChange(e) {
        //处理数据
        //获取所有的市
      let cityList = this.cityGroup[e.detail.value[0]].cityList
      let list = []
      for (var i = 0; i < cityList.length; i++) {
        list.push(cityList[i].name)
      }
      this.multiArray[1] = list //当前省份的市
      this.multiIndex[0] = e.detail.value[0]
      this.multiIndex[1] = e.detail.value[1]
      this.province = this.multiArray[0][this.multiIndex[0]]
      this.city = this.multiArray[1][this.multiIndex[1]]
     
      
    },
    // 选择省or选择市
    bindMultiPickerColumnChange(e) {
      let that = this
      switch (e.detail.column) {
        case 0:
          let cityList = this.cityGroup[e.detail.value].cityList
          let list = []
          for (var i = 0; i < cityList.length; i++) {
            list.push(cityList[i].name)
          }
          this.multiArray[1] = list
          this.multiIndex[0] = e.detail.value
          this.multiIndex[1] = 0
      }
    },

实现效果如下

完结啦~