element ui省市区三级联动,及获取三级联动的name值
时间:2021-07-22
本文章向大家介绍element ui省市区三级联动,及获取三级联动的name值,主要包括element ui省市区三级联动,及获取三级联动的name值使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<el-cascader ref="refSubCat" v-model="areaValue" :options="options" @change="handleChange"> </el-cascader>
js
areaValue: [],
options:[],
模拟后台返回数据格式后修改为cascader需要的格式
let testArr=[ { name:"北京市", cityList:[ { name:"市辖区", pid:"1", areaList:[{ name:"东城区", pid:"2", },{ name:"东城区2", pid:"3", }] }, { name:"西城区", areaList:[{ name:"西城区", pid:"4", }] } ] } ] let options=[] let cityData =JSON.stringify(testArr); options =JSON.parse(cityData.replace(/pid/g,"value").replace(/name/g,"label").replace(/areaList/g,"children").replace(/cityList/g,"children")); this.options=options console.log(options)
打印选中的省市区的value和name
handleChange(value) { debugger console.log(value); console.log(this.$refs["refSubCat"]) console.log(this.$refs["refSubCat"].getCheckedNodes()[0].label) console.log(this.$refs["refSubCat"].getCheckedNodes()[0].pathLabels) },
原文地址:https://www.cnblogs.com/shuihanxiao/p/15046441.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 53 道 Python 面试题,帮你成为大数据工程师
- 用 Python 将 QQ 好友头像生成「 五一快乐」
- Jenkins集成Github自动部署
- Linux&树莓派安装seafile私有云盘
- 推荐一款可视化+NoteBook工具
- 用 Python 送上特殊的母亲节祝福
- 还在为 520 发愁吗?教你用 Python 写个表白神器!
- 用 Python 实现微信自动回复
- 一行命令给猎狐 F4 带口罩 & 检测是否带口罩
- 备战 618,用 Python 领取京东优惠券
- 一键生成你的微信社交数据报告
- 分析OutOfMemoryError异常
- 用 Python 制作关不掉的端午安康弹窗
- 使用JFR分析性能问题
- MyISAM 迁移至 InnoDB方案