接口數據如上圖

省市區多級聯動，都是使用的一個接口通過傳參父類的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)
}