在做电商项目的时候需要添加修改收货地址,如何实现三级联动选取省市区地址困扰了我不少时间,这篇文章主要给大家介绍了关于利用vue+elementUI设置省市县三级联动下拉列表框的相关资料,需要的朋友可以参考下
前言
在前端项目开发中,经常会遇到省市县三级联动的下拉列表框组的问题,分享以下实现方法,以下内容为具体的实现过程:
实现过程
1.静态页面组件搭建:使用elementUI的form表单,并做一下基本的修改,得到以下结果:
2.然后是组件的数据配置:
表单的基本数据存放在form对象里面,至于省市县三个下拉菜单的数据,则以数组的形式存放,分别为provinceList[];cityList[];countyListp[]。
3.接下来处理重点数据:三级下拉菜单的联动:
3.1点击省下拉菜单获取省份:
主要技术点在于:通过调取百度地图的API接口,获取全国省市县行政区划:
this.$http({ method:"get", url:"https://restapi.amap.com/v3/config/district?parameters", params:{ key:"3a708a4ef5e3af28694b1c861985a5ce", keyWords:"中国", subdistrict:3 } }).then((res)=>{ this.form.provinceList = res.data.districts[0].districts /* 省*/ /* 进行遍历赋值*/ /* 市区和县区*/ let newProvince = this.form.provinceList for(let i = 0; i
上述代码的作用:在 获取百度地图提供的行政区划后,对这些行政区划树进行初始化,主要是给选各个省份匹配其对应的市和县级行政区。
接下来的操作就是点击选择省份就可以获取其对应的 市级行政区,点击选择市级下拉菜单就可以获取其对应的县级行政区,代码如下:
根据选中省,匹配市:
provinceChange(that){ // 根据选中省,匹配市 let cityCode = 0 let newCityArry = [] this.form.provinceList.forEach((item,index)=>{ if(item.name == that){ cityCode = item.code } }) // console.log(cityCode) if(cityCode){ this.form.cityList = [] this.CITY.forEach((item,index)=>{ if(item.code == cityCode){ this.form.cityList.push(item) } }) /* 市匹配成功*/ } },
// 根据市区,匹配县区
cityChange(that){ let countyCode = 0 let cityname = '' let newCountyArry = [] this.form.cityList.forEach((item,index)=>{ if(item.name == that){ countyCode = item.id cityname = item.name } }) if(countyCode){ this.form.countyList = [] this.XIAN.forEach((item,index)=>{ if(item.code == countyCode && item.cityCountyName == cityname){ this.form.countyList.push(item) } }) } },
做了这些程序配置后,就可以实现三级下拉菜单的联动了。效果图如下
总结
到此这篇关于利用vue+elementUI设置省市县三级联动下拉列表框的文章就介绍到这了,更多相关vue+elementUI省市县三级联动下拉列表框内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站!
以上就是利用vue+elementUI设置省市县三级联动下拉列表框的详细过程的详细内容,更多请关注0133技术站其它相关文章!