利用vue+elementUI设置省市县三级联动下拉列表框的详细过程

 更新时间:2022年08月03日 15:45:21   作者:动飞雨  
在做电商项目的时候需要添加修改收货地址,如何实现三级联动选取省市区地址困扰了我不少时间,这篇文章主要给大家介绍了关于利用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 < newProvince.length; i++){              /* 省级*/
           for(let j = 0; j < newProvince[i].districts.length; j++){       /* 市级*/
               let city = newProvince[i].districts[j].name
               this.CITY.push({id:j+1,name:city,code:i+1})
               for(let k = 0;k<newProvince[i].districts[j].districts.length; k++){/* 县级*/
                   let xian = newProvince[i].districts[j].districts[k].name
                    this.XIAN.push({id:k+1,name:xian,code:j+1,cityCountyName:city})
               }
           }
       }
       for(let m = 0; m < newProvince.length;m++){
           newProvince[m] = {...newProvince[m],...{code:m+1}}
       }
       this.form.provinceList = newProvince
})

上述代码的作用:在 获取百度地图提供的行政区划后,对这些行政区划树进行初始化,主要是给选各个省份匹配其对应的市和县级行政区。

接下来的操作就是点击选择省份就可以获取其对应的 市级行政区,点击选择市级下拉菜单就可以获取其对应的县级行政区,代码如下:

根据选中省,匹配市:

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省市县三级联动下拉列表框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 记录--使用el-time-picker默认值遇到的问题

    记录--使用el-time-picker默认值遇到的问题

    这篇文章主要介绍了记录--使用el-time-picker默认值遇到的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 简单理解Vue中的nextTick方法

    简单理解Vue中的nextTick方法

    本篇文章主要介绍了简单理解Vue中的nextTick方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vite项目vite.config.js详细配置

    vite项目vite.config.js详细配置

    vite.config.js是Vite框架中的配置文件,用于配置项目的构建和运行时的行为,下面这篇文章主要给大家介绍了关于vite项目vite.config.js详细配置的相关资料,需要的朋友可以参考下
    2023-05-05
  • Vue实现封装一个切片上传组件

    Vue实现封装一个切片上传组件

    平时业务开发中用el-upload能满足大部分场景,但是对于一些大文件的上传时会比较慢,所以自己基于el-upload封装了一个切片上传组件,希望对大家有所帮助
    2023-03-03
  • 关于全局安装vue-cli遇到的问题及解决

    关于全局安装vue-cli遇到的问题及解决

    这篇文章主要介绍了关于全局安装vue-cli遇到的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue组件传值(高级)、属性传值、反向传值、跨级传值实例详解

    vue组件传值(高级)、属性传值、反向传值、跨级传值实例详解

    父组件通过属性传值给子组件,父组件修改数据后会刷新页面并重新传值给子组件,子组件可以修改父组件传的值并刷新自己的页面 但是并不会修改父组件中的值,这篇文章主要介绍了vue组件传值(高级)、属性传值、反向传值、跨级传值,需要的朋友可以参考下
    2022-09-09
  • vue使用动态组件手写Router View实现示例

    vue使用动态组件手写Router View实现示例

    这篇文章主要为大家介绍了vue使用动态组件手写RouterView实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • Vue的列表之渲染,排序,过滤详解

    Vue的列表之渲染,排序,过滤详解

    这篇文章主要为大家详细介绍了Vue的列表之渲染,排序,过滤,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • vue3使用videojs播放m3u8格式视频教程

    vue3使用videojs播放m3u8格式视频教程

    m3u8是一种基于HTTP Live Streaming(HLS)文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成,下面这篇文章主要给大家介绍了关于vue3使用videojs播放m3u8格式视频的相关资料,需要的朋友可以参考下
    2023-06-06
  • 使用async-validator编写Form组件的方法

    使用async-validator编写Form组件的方法

    本篇文章主要介绍了使用 async-validator 编写 Form 组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01

最新评论