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变量定义大全_详解python变量与数据类型
这篇文章我们学习 Python 变量与数据类型 变量 变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念,变量可以通过变量名访问.在 Python 中 变量命名规定,必须是大小写英文,数字 ...
- python登录系统文件版_详解用python实现基本的学生管理系统(文件存储版)(python3)...
这个是升级的版本,比较进阶一点的,相对与之前的文件管理系统,数据只是存储到了内存中,而不是存储到硬盘上,我们想让文件存储到硬盘上的话,一个是存储到文件里,一个是存储到数据库中,存储到数据库中的版本会后 ...
- python编写一个名片_详解Python做一个名片管理系统
名片管理系统有两个模块组成:cards_main.py和 cards_tools.py一个是主程序,另一个是封装增删改查函数的被调用程序 代码如下 cards_main.py #! /usr/bin/ ...
- python提取邮件附件_详解python实现读取邮件数据并下载附件的实例
详解python实现读取邮件数据并下载附件的实例 实现结果图: 实现代码: #!/usr/bin/python2.7 # _*_ coding: utf-8 _*_ """ ...
- python英语字典程序修改_详解如何修改python中字典的键和值
我们知道python中字典是无序的,它们都是通过hash去对应的.一般的如果我们需要修改字典的值,只需要直接覆盖即可,而修改字典的键,则需要使用字典自带的pop函数,示例如下: t = {} t['a ...
- python停止线程池_详解python中Threadpool线程池任务终止示例代码
需求 加入我们需要处理一串个位数(0~9),奇数时需要循环打印它:偶数则等待对应时长并完成所有任务:0则是错误,但不需要终止任务,可以自定义一些处理. 关键点 定义func函数处理需求 callbac ...
- python模块搜索原则_详解python模块路径查找规则及定义
在python中创建一个模块非常简单,只需要在当前目录下创建一个 .py文件即可,系统自动将其解析成模块,文件名就是模块名.很多我们源码时代的同学都认为在查找模块时优先使用当前目录下的自定义模块.其实 ...
- python中index函数_详解python中的index函数用法
1.函数的创建 def fun(): #定义 print('hellow') #函数的执行代码 retrun 1 #返回值 fun() #执行函数 2.函数的参数 普通参数 :要按照顺序输入参数 de ...
- python获取屏幕文字_详解:四种方法教你对Python获取屏幕截图(PyQt , pyautogui)...
前言: 今天为大家带来的内容是详解:四种方法教你对Python获取屏幕截图(PyQt , pyautogui)本文具有不错的参考意义,希望能够帮助到大家! Python获取电脑截图有多种方式,具体如下 ...
最新文章
- C++中关于[]静态数组和new分配的动态数组的区别分析
- One Day-XML:XSLT
- Tomcat配置虚拟路径,使上传文件与服务器及工程文件分离开
- python 操作微信定时发信息
- 【Linux】Ubuntu下进行C语言编程
- 实现二叉树的三种非递归遍历算法
- 【Python】【数据库】
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_07 缓冲流_3_BufferedInputStream_字节缓冲...
- 路由器设置虚拟服务器王者人生,王者人生位置修改 | 手游网游页游攻略大全
- [5-20]绿色精品软件每天更新[uc23整理]
- 个人知乎 ##功能一-登录注册
- 计算机图形学在游戏设计中的应用
- Windows系统操作快捷键---百度百科
- 显卡超了100测试软件黑屏,win10更新后,桌面窗口管理器间歇性占用GPU3D 100%,此时系统卡顿,黑屏...
- 2020博客之星年度总评选TOP200名单已出,感谢老铁们的支持目前排名TOP77
- Python语言程序设计——实验八
- 温度传感器DS18B20介绍
- @JsonFormat @DataTimeFormat 时间格式
- EasyPro_90B编程器烧录器使用操作方法
- 让IE6支持HTML5元素
热门文章
- mysql搭建测试环境的步骤_如何搭建测试环境
- 不止一个人犯错,这种 Github 不要写在简历上!
- 高并发之并发容器,了解多少(从入门到超神)
- hibernate教程--关联关系的映射详解
- Eclipse实现hibernate反向工程:从数据库逆向生成实体类和hbm文件
- java反射的优化_请问Java反射的性能为什么比直接调用慢一个数量级左右?
- SSM框架中分页插件pageHelper的使用实例
- Oracle translate 函数的用法, 以及和replace的区别
- solr管理界面详解
- 如何取消JS事件的派发——stopPropagation()