利用vue+elementUI設置省市縣三級聯(lián)動下拉列表框的詳細過程

更新時間：2022年08月03日 15:45:21 作者：動飛雨

在做電商項目的時候需要添加修改收貨地址,如何實現(xiàn)三級聯(lián)動選取省市區(qū)地址困擾了我不少時間,這篇文章主要給大家介紹了關于利用vue+elementUI設置省市縣三級聯(lián)動下拉列表框的相關資料,需要的朋友可以參考下

前言

在前端項目開發(fā)中，經(jīng)常會遇到省市縣三級聯(lián)動的下拉列表框組的問題，分享以下實現(xiàn)方法，以下內(nèi)容為具體的實現(xiàn)過程：

實現(xiàn)過程

1.靜態(tài)頁面組件搭建：使用elementUI的form表單，并做一下基本的修改，得到以下結(jié)果：

2.然后是組件的數(shù)據(jù)配置：

表單的基本數(shù)據(jù)存放在form對象里面，至于省市縣三個下拉菜單的數(shù)據(jù)，則以數(shù)組的形式存放，分別為provinceList[];cityList[];countyListp[]。

3.接下來處理重點數(shù)據(jù):三級下拉菜單的聯(lián)動：

3.1點擊省下拉菜單獲取省份：

主要技術點在于：通過調(diào)取百度地圖的API接口，獲取全國省市縣行政區(qū)劃：

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  /* 省*/
         /* 進行遍歷賦值*/
         /* 市區(qū)和縣區(qū)*/
       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
})

上述代碼的作用：在獲取百度地圖提供的行政區(qū)劃后，對這些行政區(qū)劃樹進行初始化，主要是給選各個省份匹配其對應的市和縣級行政區(qū)。

接下來的操作就是點擊選擇省份就可以獲取其對應的市級行政區(qū)，點擊選擇市級下拉菜單就可以獲取其對應的縣級行政區(qū)，代碼如下：

根據(jù)選中省，匹配市：

provinceChange(that){
    // 根據(jù)選中省，匹配市
    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)
            }
        })  /* 市匹配成功*/
    }
},

// 根據(jù)市區(qū)，匹配縣區(qū)

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)
                        }
                    })
                }
            },

做了這些程序配置后，就可以實現(xiàn)三級下拉菜單的聯(lián)動了。效果圖如下