demand background
Select a city, and the districts and counties where it is located should correspond to the selected city one by one.
Development idea
Because the radio button uses public components, the obtained val is "Shenzhen" instead of the index, so you can first determine the index value of the selected city; thus, the data of the drop-down box of the district and county where it is located is directly obtained from the Index value to fetch.
The data structure is as follows:
source code
//公共组件里的message
message：{
{
key: "city",
label: "城市",
placeholder: "请选择",
type: 1,
selects: this.cityArr,
defaults: "",
change: val => this.getIndex(val)//选择下拉框的值是从而确定索引
},
{
key: "county",
label: "医药机构所在区县",
placeholder: "请选择",
type: 1,
defaults: "",
noClearable: this.ifNoClearable,
selects: this.countyArr,
filterable: true
},
},
//获取城市下拉框选项
getCity() {
this.cityMy = [];
List.cityAndCounty().then(res => {
if (res.code === 0) {
const data = res.result || [];
for (let i = 0; i < data.length; i++) {
this.cityMy.push(data[i].city);
}
this.cityArr = this.cityMy.map(item => {
return {
label: item, value: item };
}); //拿到的是城市的列表
this.message.forEach(it => {
if (it.key === "city") {
this.$set(it, "selects", this.cityArr);
}
});
this.defaultAjax += 1;
}
});
},
//获取没选城市的医药机构所在区县下拉框选项
getCountyName() {
List.countyName().then(res => {
if (res.code === 0) {
this.countyNameArr = res.result.map(item => item.county);
}
});
},
//获取选择城市的索引值
getIndex(val) {
const cityIndex = this.cityMy.indexOf(val);
if (cityIndex > -1) {
this.getCounty(cityIndex);
}
},
//获取所选城市的对应医药机构所在区县下拉框
getCounty(cityIndex) {
ScheduleList.isHospitalArea().then(res => {
if (res.result === "已配置医院范围") {
this.ifNoClearable = true;
List.cityAndCounty().then(res => {
if (res.code === 0) {
const data = res.result || [];
let countyMy = [];
countyMy =cityIndex || cityIndex === 0 ? data[cityIndex].countyList : this.countyNameArr;
this.countyArr = countyMy.map(item => {
return {
label: item, value: item };
});
this.message.forEach(it => {
if (it.key === "county") {
this.$set(it, "selects", this.countyArr);
}
});
this.defaultAjax += 1;
}
});
} else if (res.result === "未配置医院范围") {
this.ifNoClearable = false;
List.cityAndCounty().then(res => {
if (res.code === 0) {
const data = res.result || [];
let countyMy = [];
countyMy = cityIndex || cityIndex === 0 ? data[cityIndex].countyList : this.countyNameArr;
this.countyArr = countyMy.map(item => {
return {
label: item, value: item };
});
this.message.forEach(it => {
if (it.key === "county") {
this.$set(it, "selects", this.countyArr);
}
});
this.defaultAjax += 1;
}
});
}
});
},
Cascading dropdown radio buttons
In fact, there are some ready-made frameworks like cascading drop-down menu boxes. You can refer to these frameworks.
1. elementUI :
https://element.eleme.cn/#/zh-CN/component/cascader
- Ant Design:
https://3x.ant.design/components/cascader-cn/
