小程序picker组件地区市区级联

image.png

  
    

        切换城市
        
    
  

range-key有个注意点，value值是picker弹窗显示的object的值，这里是字符串类型

data(){
    return{
        multiArray: [],
        multiIndex: [0, 0], //二级
    }
}

获取动态数据

myPromise(parentCode) {
      return new Promise((resolve, reject) => {
        getArea(parentCode)
          .then((res2) => {
            if (this.$constant.BIZ_RESPONSE_CODE == res2.data.code) {
              let data = res2.data.data;
              resolve(data);
            }
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
     async getAreaInfo(parentCode) {
      let data = await this.myPromise(parentCode);
      if (data) {
        this.cityList = data;
        let cityIndex = this.cityList.findIndex(
          (item) => item.code == this.cityCode
        );
        let pCode = this.cityList[cityIndex].code;
        //获取到市级的code，用市级的code去调县级的接口
        setTimeout(() => {
          this.getCounty(pCode);
        }, 500);
      }
    },
    // 获取县级
    getCounty(pCode, index) {
      getArea(pCode)
        .then((res3) => {
          if (this.$constant.BIZ_RESPONSE_CODE == res3.data.code) {
            let data = res3.data.data;
            this.areaList = data;
            if (data) {
              // 找到下标
              let cityIndex = null;
              let areaindex = null;
              // 滚动城市列
              if (index > 0 || index == 0) {
                cityIndex = this.cityList.findIndex(
                  (item) => item.code == this.cityCode
                );
                this.areaName = data[0].name;
                this.areaCode = data[0].code;
              } else {
                //默认显示当前
                cityIndex = this.cityList.findIndex(
                  (item) => item.code == this.cityCode
                );
                areaindex = data.findIndex(
                  (item) => item.code == this.areaCode
                );
                // 数组的市级的下标和县级的下标值
                this.multiIndex = [cityIndex, areaindex];
              }
            // 这是一个二维数组，数组下标0的是市级的list,数组下标为1的是县级的list
              this.multiArray = [this.cityList, data];
            }
          } else {
            console.log(" 请求失败 " + res3.data.msg);
            mpvue.showToast({
              title: res3.data.msg,
              icon: "none",
              duration: 1500,
            });
          }
        })
        .catch((err) => {
          mpvue.showToast({
            title: "获取区信息报错",
            icon: "none",
            duration: 1500,
          });
          console.log(" 请求失败 " + err);
        });
    },

 bindMultiPickerColumnChange: function (e) {
    switch (e.mp.detail.column) {
    case 0:
        let pCode = this.cityList[e.mp.detail.value].code;
        this.cityName = this.cityList[e.mp.detail.value].name;
        this.multiIndex = [e.mp.detail.value, 0];
        this.getCounty(pCode, e.mp.detail.value);
        break;
    }
},
bindMultiPickerChange: function (e) {
    this.multiIndex = e.mp.detail.value;
    let cityIndex = this.multiIndex[0];
    let countyIndex = this.multiIndex[1];
    this.cityName = this.multiArray[0][cityIndex].name;
    this.areaName = this.multiArray[1][countyIndex].name;
    this.cityCode = this.multiArray[0][cityIndex].code;
    this.areaCode = this.multiArray[1][countyIndex].code;
    this.getRank();
},

上面代码可能还存在需要优化的地方，但是实现效果是可以的了。