python三级联动菜单_详解element-ui级联菜单（城市三级联动菜单）和回显问题
代碼最下面
各項的參數截圖
代碼如下
v-model="ruleForm.censusLand"
style="width:180px;padding-left:7px;width:270px"
placeholder="請選擇省市區"
:options="cascaderData1"
@expand-change="censusLandChange"
:props="{
value: 'id',
label: 'name',
children: 'cities'
}"
>
data (){
retutn {
ruleForm: {
censusLand // 雙向綁定
},
cascaderData1: [], // 戶籍省 一級菜單
}
}
// 戶籍所在地-選中后下一級
censusLandChange(val) {
this.getCensusLand(val);
},
// 戶籍所在地
getCensusLand(val) {
// console.log(val);
let idArea;
let sizeArea;
if (!val) {
idArea = null;
sizeArea = 0;
} else if (val.length === 1) {
idArea = val[0];
sizeArea = val.length; // 3:一級 4:二級 6:三級
} else if (val.length === 2) {
idArea = val[1];
sizeArea = val.length; // 3:一級 4:二級 6:三級
}
this.$get(
"/stu/student/getAreaId",
{
AreaId: idArea
},
res => {
// console.log("1111",res);
if (sizeArea === 1) {
// 點擊一級 加載二級 市
this.cascaderData1.map((value, i) => {
if (value.id === val[0]) {
if (!value.cities.length) {
value.cities = res.data.map((value, i) => {
return {
id: value.id,
name: value.name,
cities: []
};
});
}
}
});
} else if (sizeArea === 2) {
// 點擊二級 加載三級 區
this.cascaderData1.map((value, i) => {
if (value.id === val[0]) {
value.cities.map((value, i) => {
if (value.id === val[1]) {
if (!value.cities.length) {
value.cities = res.data.map((value, i) => {
return {
id: value.id,
name: value.name
};
});
}
}
});
}
});
}
// console.log(this.ruleForm.censusLand);
},
err => {}
);
},
回顯時，注意要同步(通過new Promise)
this.getAllMe(); // 先獲取一級的城市
// 在回顯數據的res 里放入這段代碼(視情況而定)
// 需要先加載市級菜單，再去加載省級的()
// 戶口所在地
new Promise((resolve, reject) => {
let val = [res.data.getupdate.domicileProvinceId];
let idArea;
let sizeArea;
if (!val) {
idArea = null;
sizeArea = 0;
} else if (val.length === 1) {
idArea = val[0];
sizeArea = val.length; // 3:一級 4:二級 6:三級
}
this.$get(
"/stu/student/getAreaId",
{
AreaId: idArea
},
res => {
// console.log("1111", res);
if (sizeArea === 1) {
// 點擊一級 加載二級 市
this.cascaderData1.map((value, i) => {
if (value.id === val[0]) {
if (!value.cities.length) {
value.cities = res.data.map((value, i) => {
return {
id: value.id,
name: value.name,
cities: []
};
});
}
}
});
}
resolve(res);
},
err => {
reject(err);
}
);
})
.then(data => {
// 通過他們去獲取第三級的
this.getCensusLand([
res.data.getupdate.domicileProvinceId, // 一級
res.data.getupdate.domicileCityId // 二級
]); // 戶口所在地
})
.catch(err => {
console.log(err);
});
最后再雙向綁定給censusLand
// 戶籍
censusLand: [
res.data.getupdate.domicileProvinceId * 1,
res.data.getupdate.domicileCityId * 1,
res.data.getupdate.domicileDistrictId * 1
],
大概就這些了，希望對大家有幫助。也希望大家多多支持我們。
時間： 2019-09-30
總結
以上是生活随笔為你收集整理的python三级联动菜单_详解element-ui级联菜单（城市三级联动菜单）和回显问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python优秀库_2017年度15个优
- 下一篇： python函数分为_python 函数