使用这种方法的原因:
方法实现:
-
样式
-
view
<view class="inputbox clearfix outbox" @click="showTrue">
<text class="fl lefttxt">所在地区</text>
<picker mode="multiSelector" :range="mulSelect" :range-key="'deptName'" @change="pickerChange" @columnchange="colChange">
<view :class="{active:isActive}" v-if="!address">
<u--input fontSize="12px" class="fl oneinput" suffixIcon="arrow-down" suffixIconStyle="color: #3CB261"
v-model="userInfo.address" disabled placeholder="请选择" border="none"></u--input>
</view>
<view v-else style="font-size:12px;">{{address}}</view>
</picker>
</view>
data() {
return {
province: [], //省数组
city: [], //市数组
district: [], //区数组
street: [], //街道数组
mulSelect: [], //四级联动显示数组,该数组的值为[[province],[city],[district],[street]]
provinceId: 0, //省的id
cityId: 0, //市的id
districtId: 0,//区的id
isActive:false,
address:'',
}
}
onLoad(options) {
this.getProvince();
},
methods: {
colChange(e) {
switch (e.detail.column){
case 0://选择市
this.provinceId=this.mulSelect[0][e.detail.value].deptId;
// 获取对应的 区县
getCountyListByCityApi({deptId:this.provinceId}).then(res=>{
if(res.code == 200){
this.city = res.data;
this.mulSelect[1]=this.city;
// 获取对应的乡镇
getCountyListByCityApi({deptId:this.city[0].deptId}).then(res=>{
if(res.code == 200){
this.district = res.data;
this.mulSelect[2]=this.district;
// 获取对应的村
getCountyListByCityApi({deptId:this.district[0].deptId}).then(res=>{
if(res.code == 200){
this.street = res.data;
this.mulSelect[3]=this.street;
}
})
}
})
}
})
break;
case 1://选择区县
this.cityId=this.mulSelect[1][e.detail.value].deptId;
// 获取对应的乡镇
getCountyListByCityApi({deptId:this.cityId}).then(res=>{
if(res.code == 200){
this.district = res.data;
this.mulSelect[2]=this.district;
// 获取对应的村
getCountyListByCityApi({deptId:this.district[0].deptId}).then(res=>{
if(res.code == 200){
this.street = res.data;
this.mulSelect[3]=this.street;
}
})
}
})
break;
case 2://选择镇
this.districtId=this.mulSelect[2][e.detail.value].deptId;
getCountyListByCityApi({deptId:this.districtId}).then(res=>{
if(res.code == 200){
this.street = res.data;
this.mulSelect[3]=this.street;
}
});
break;
case 3://选择街道
break;
default:
break;
}
},
pickerChange(e) {
//什么都不选的话,e.detail.value的值为[null,null,null,null]
//只选择省的话,e.detail.value的值为[数字,null,null,null]
//只选择市的话,e.detail.value的值为[数字,数字,null,null]
//所以获取e.detail.value的值先判断是否为null,如果为null则取值为0
for(var i=0;i<e.detail.value.length;i++){
if(e.detail.value[i]===null){
e.detail.value[i]=0;
}
}
var s_province=this.mulSelect[0][e.detail.value[0]];//获取选中的省
var s_city=this.mulSelect[1][e.detail.value[1]||0];//获取选中的市
var s_district=this.mulSelect[2][e.detail.value[2]||0];//获取选中的区
var s_street=this.mulSelect[3][e.detail.value[3]||0];//获取选中的街道
// console.log(e.detail.value);
//赋值显示在页面
this.address=s_province.deptName+s_city.deptName+s_district.deptName+s_street.deptName;
//将字体颜色修改为黑色
this.isActive=true;
console.log(s_street);
// 给表单复制
this.userInfo.address = s_street.deptId
},
getProvince() { // 此方法可以继续优化
var that = this;
getAllCityListApi({}).then(res=>{
that.province = []
if(res.code == 200){
that.province = res.data;;
that.mulSelect.push(that.province);
var p = that.province[0].deptId;
getCountyListByCityApi({deptId:p}).then(res=>{
if(res.code == 200){
that.city = res.data;
that.mulSelect.push(that.city);
var p = that.city[0].deptId;
getCountyListByCityApi({deptId:p}).then(res=>{
if(res.code == 200){
that.district = res.data;
that.mulSelect.push(that.district);
var p = that.district[0].deptId;
getCountyListByCityApi({deptId:p}).then(res=>{
if(res.code == 200){
that.street = res.data;
that.mulSelect.push(that.street);
}
})
}
})
}
})
}
})
},
}