微信小程序使用picker根据接口给的省市区的数据实现省市区三级联动或者省市区街道等多级联动

接口数据如上图

省市区多级联动，都是使用的一个接口通过传参父类的code。返回我们想要的数据

比如获取省就直接不要参数。市就把省得code传给接口，区就把市的code作为参数。

<picker mode="multiSelector" :range="mulSelect1" :range-key="'regionName'" :value="addressIndex" @change="pickerChange1" 
        @columnchange="colChange">
  <view class="picker">
    <view class="right-uni-icons">
      <uni-icons size="18" type="right" color="#A8ABB2"/>
    </view>
    <input v-model="address1" disabled placeholder="请选择"  placeholder-class="address-placeholder" v-if="!address1"/>
    <view v-else class="chosed-address">{
 
 { address1 }}</view>
  </view>
</picker>

import {ref} from "vue";
const province = ref([]) //省数组
const city = ref([]) //市数组
const district = ref([]) //区数组
const street = ref([]) //街道数组

const mulSelect1 = ref([]) //四级联动显示数组[[province],[city],[district],[street]]
const addressIndex = ref([]);//省市区街道数组的下标[0,1,0,0]
const addressCode= ref([]);省市区街道数组的编码[11,1111,111444,12220232]
const address1 = ref('');//选中省市区街道的文字组成部分

import {regionList} from "@/http/my";//接口

onLoad(() => {
  getProvince()
})

const getProvince = async () => {
  //获取1级省
let {data: province1} = await regionList({})
province.value = province1;
mulSelect1.value.push(province.value);
//获取2级
// 默认省份选择河南省.如果你不需要这里就不需要加上
let index=province.value.findIndex(res=>{
  return res.regionName=='河南省'
})
let chosedProvince=province.value[index].code;
addressIndex.value.push(index)
let {data: city1} = await regionList({parentCode: chosedProvince});

let {data: city1} = await regionList({parentCode: province.value[0].code});//默认选中省的第一个，去取市的数据
city.value = city1;
mulSelect1.value.push(city.value);
addressIndex.value.push(0)
//获取3级
let {data: district1} = await regionList({parentCode: city.value[0].code});//默认选中市的第一个，去取区的数据
district.value = district1;
mulSelect1.value.push(district.value);
addressIndex.value.push(0)
//获取4级
let {data: street1} = await regionList({parentCode: district.value[0].code});//默认选中区的第一个，去取街道的数据
street.value = street1;
mulSelect1.value.push(street.value);
addressIndex.value.push(0)
}

//有数据的变动就重新获取下级。并且下级默认选择第一个.避免出现上一次选择的第二个。切换了上级之后下级还是选的第二个的情况。
const colChange = async (e) => {
  console.log("change",e)
  if (e.detail.column == 0) {//省变化
    let {data: city1} = await regionList({parentCode: province.value[e.detail.value].code});
    city.value = city1;
    let {data: district1} = await regionList({parentCode: city.value[0].code});
    district.value = district1;
    let {data: street1} = await regionList({parentCode: district.value[0].code});
    street.value = street1;

    addressIndex.value[0]=e.detail.value;
    addressIndex.value[1]=0;
    addressIndex.value[2]=0;
    addressIndex.value[3]=0;
  }
  if (e.detail.column == 1) {//市变化
    let {data: district1} = await regionList({parentCode: city.value[e.detail.value].code});
    district.value = district1;
    let {data: street1} = await regionList({parentCode: district.value[0].code});
    street.value = street1;
    addressIndex.value[1]=e.detail.value;
    addressIndex.value[2]=0;
    addressIndex.value[3]=0;
  }
  if (e.detail.column == 2) {//区变化
    let {data: street1} = await regionList({parentCode: district.value[e.detail.value].code});
    street.value = street1;
    addressIndex.value[2]=e.detail.value;
    addressIndex.value[3]=0;
  }

  mulSelect1.value = [province.value, city.value, district.value,street.value];
  // console.log("选中的数组下标",addressIndex.value)
}

//获取选择的全部内容
const pickerChange1 = (e) => {
  console.log("pickerChange", province.value)
  let provice1 = province.value[e.detail.value[0]];
  let city1 = city.value[e.detail.value[1]]
  let district1 = district.value[e.detail.value[2]];
  let street1 = street.value[e.detail.value[3]];
  address1.value = (provice1.regionName) + (city1.regionName) + (district1.regionName)+(street1.regionName);
  addressCode.value = [provice1.code, city1.code, district1.code,street1.code];//
  let address={
    allName: address1.value,//省市区街道的中文
    code:addressCode.value,//省市区街道的code值数组
  }
  console.log('getCurrentAddressAll', address)
}