代碼最下面

各項的參數截圖

代碼如下

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级联菜单（城市三级联动菜单）和回显问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。