element-ui 级联选择Cascader选择省市区
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
// 设置prop属性
props:{
label: 'areaName',
value: 'areaId',
//children: 'children',
},
// 获取省市
getProvence() {
post(url, {parentId: 0}).then((res) => {
this.addressObject.list = res && res.data || []
this.addressObject.list.forEach((item,index)=>{
this.$set(this.addressObject.list[index], 'children', [])
})
})
},
// 级联选择器
handleAddressChange(val) {
if(val.length <= 0 ) return;
let provinceList = this.addressObject.list;
let provinceLength = provinceList.length;
let provinceAreaId = val[0];
if(val.length === 1) {
// 省areaId, 获取省下面所有的市
post(url, {parentId: provinceAreaId}).then((res) => {
for(let i = 0; i < provinceLength; i++) {
if(provinceList[i].areaId === provinceAreaId) {
this.$set(provinceList[i], 'children', res && res.data || []);
provinceList[i].children.forEach((item,index)=>{
this.$set(provinceList[i].children[index], 'children', [])
})
break;
}
}
})
}
if(val.length === 2) {
let cityId = val[1]; // 市areaId,获取市下面所有的区
post(url, {parentId: cityId}).then((res) => {
for(let i = 0; i < provinceLength; i++) {
if(this.addressObject.list[i].areaId === provinceAreaId) {
let findProvince = this.addressObject.list[i];
let cityList = findProvince.children;
let cityLength = cityList.length;
for(let j = 0; j < cityLength; j++){
if(cityList[j].areaId === cityId) {
this.$set(cityList[j], 'children', res && res.data || []);
break;
}//if
}//for
break;
}//if
}//for
})
}
},
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献8条内容
所有评论(0)