antecedentes de la demanda
Seleccione una ciudad, y los distritos y condados donde se ubica deben corresponder uno por uno a la ciudad seleccionada.
ideas de desarrollo
Debido a que el botón de opción utiliza componentes públicos, el valor obtenido es "Shenzhen" en lugar del índice, por lo que primero puede determinar el valor del índice de la ciudad seleccionada; por lo tanto, los datos del cuadro desplegable del distrito y condado donde donde se encuentra se obtiene directamente del valor del índice a buscar.
La estructura de datos es la siguiente:
código fuente
//公共组件里的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;
}
});
}
});
},
Botones de radio desplegables en cascada
De hecho, existen algunos marcos listos para usar, como cuadros de menú desplegables en cascada, que puede consultar.
1. elementoUI :
https://element.eleme.cn/#/zh-CN/component/cascader
- Diseño de hormigas:
https://3x.ant.design/components/cascader-cn/
