广平专业做网站互联网营销推广服务商

接口数据如上图

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