接口数据如上图

省市区多级联动，都是使用的一个接口通过传参父类的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)
}