<picker
class="select-picker"
mode="multiSelector"
@change="bindMultiPickerChange"
@columnchange="bindMultiPickerColumnChange"
:value="multiIndex"
:range="multiArray"
range-key="name"
>
<div class="select-wrapper">
<span class="select-span">切换城市</span>
<img
src="http://www.qunlisoft.com/tech/mp-techplus/images/rank/more.png"
/>
</div>
</picker>
range-key
有个注意点,value值是picker弹窗显示的object的值,这里是字符串类型
data(){
return{
multiArray: [],
multiIndex: [0, 0], //二级
}
}
获取动态数据
myPromise(parentCode) {
return new Promise((resolve, reject) => {
getArea(parentCode)
.then((res2) => {
if (this.$constant.BIZ_RESPONSE_CODE == res2.data.code) {
let data = res2.data.data;
resolve(data);
}
})
.catch((err) => {
reject(err);
});
});
},
async getAreaInfo(parentCode) {
let data = await this.myPromise(parentCode);
if (data) {
this.cityList = data;
let cityIndex = this.cityList.findIndex(
(item) => item.code == this.cityCode
);
let pCode = this.cityList[cityIndex].code;
//获取到市级的code,用市级的code去调县级的接口
setTimeout(() => {
this.getCounty(pCode);
}, 500);
}
},
// 获取县级
getCounty(pCode, index) {
getArea(pCode)
.then((res3) => {
if (this.$constant.BIZ_RESPONSE_CODE == res3.data.code) {
let data = res3.data.data;
this.areaList = data;
if (data) {
// 找到下标
let cityIndex = null;
let areaindex = null;
// 滚动城市列
if (index > 0 || index == 0) {
cityIndex = this.cityList.findIndex(
(item) => item.code == this.cityCode
);
this.areaName = data[0].name;
this.areaCode = data[0].code;
} else {
//默认显示当前
cityIndex = this.cityList.findIndex(
(item) => item.code == this.cityCode
);
areaindex = data.findIndex(
(item) => item.code == this.areaCode
);
// 数组的市级的下标和县级的下标值
this.multiIndex = [cityIndex, areaindex];
}
// 这是一个二维数组,数组下标0的是市级的list,数组下标为1的是县级的list
this.multiArray = [this.cityList, data];
}
} else {
console.log(" 请求失败 " + res3.data.msg);
mpvue.showToast({
title: res3.data.msg,
icon: "none",
duration: 1500,
});
}
})
.catch((err) => {
mpvue.showToast({
title: "获取区信息报错",
icon: "none",
duration: 1500,
});
console.log(" 请求失败 " + err);
});
},
bindMultiPickerColumnChange: function (e) {
switch (e.mp.detail.column) {
case 0:
let pCode = this.cityList[e.mp.detail.value].code;
this.cityName = this.cityList[e.mp.detail.value].name;
this.multiIndex = [e.mp.detail.value, 0];
this.getCounty(pCode, e.mp.detail.value);
break;
}
},
bindMultiPickerChange: function (e) {
this.multiIndex = e.mp.detail.value;
let cityIndex = this.multiIndex[0];
let countyIndex = this.multiIndex[1];
this.cityName = this.multiArray[0][cityIndex].name;
this.areaName = this.multiArray[1][countyIndex].name;
this.cityCode = this.multiArray[0][cityIndex].code;
this.areaCode = this.multiArray[1][countyIndex].code;
this.getRank();
},
上面代码可能还存在需要优化的地方,但是实现效果是可以的了。