一、緣由

在項目開發過程中，有一個需求是省市區地址選擇的功能，一開始想的是直接使用靜態地址資源庫本地打包，但這種方式不方便維護，于是放棄。后來又想直接讓后臺返回全部地址數據，然后使用級聯選擇器進行選擇，但發現數據傳輸量有點大且處理過程耗時，于是又摒棄了這種方法。最后還是決定采用異步的方式進行省市區地址選擇，即先查詢省份列表，然后根據選擇的省份code查詢城市列表，最后根據選擇的城市列表獲取區/縣列表，最終根據應用場景不同，給出了兩種實現方案。

其中后臺總共需要提供4個接口，一個查詢所有省份的接口，一個根據省份code查詢其下所有城市的接口，一個根據城市code查詢其下所有區/縣的接口，以及一個根據地址code轉換成省市區三個code值的接口。

// 本人項目中使用的四個接口`${this.API.province}/${countryCode}` // 根據國家code查詢省份列表，中國固定為156，可以拓展`${this.API.city }/${provinceCode}` // 根據省份code查詢城市列表`${this.API.area}/${cityCode}` // 根據城市code查詢區/縣列表`${this.API.addressCode}/${addressCode}` // 地址code轉換為省市區code

二、基于el-cascader 級聯選擇器的單選擇框實現方案

<template> <el-row>  <el-cascader   size="small"   :options="city.options"   :props="props"   v-model="cityValue"   @active-item-change="handleItemChange"   @change="cityChange">  </el-cascader> </el-row></template><script>export default { name: 'addressSelector', props: {  areaCode: null }, model: {  prop: 'areaCode',  event: 'cityChange' }, data () {  return {   // 所在省市   city: {    obj: {},    options: []   },   props: { // 級聯選擇器的屬性配置    value: 'value',    children: 'cities',    checkStrictly: true   },   cityValue: [], // 城市代碼  } }, computed: { }, created () {  this._initData() }, mounted () { }, methods: {  _initData () {   this.$http({    method: 'get',    url: this.API.province + '/156' // 中國   }).then(res => {    this.city.options = res.data.body.map(item => { // 所在省市     return {      value: item.provinceCode,      label: item.provinceName,      cities: []     }    })   })  },  getCodeByAreaCode (code) {   if (code == undefined) return false   this.$http({    method: 'get',    url: this.API.addressCode + '/' + code   })   .then(res => {    if (res.data.code === this.API.SUCCESS) {     let provinceCode = res.data.body.provinceCode     let cityCode = res.data.body.cityCode     let areaCode = res.data.body.areaCode     this.cityValue = [provinceCode, cityCode, areaCode]     this.handleItemChange([provinceCode, cityCode])    }   })   .finally(res => {   })  },  handleItemChange (value) {   let a = (item) => {    this.$http({     method: 'get',     url: this.API.city + '/' + value[0],    }).then(res => {     item.cities = res.data.body.map(ite => {      return {       value: ite.cityCode,       label: ite.cityName,       cities: []      }     })     if(value.length === 2){ // 如果傳入的value.length===2 && 先執行的a()，說明是傳入了areaCode，需要初始化多選框      b(item)     }    }).finally(_ => {    })   }   let b = (item) => {    if (value.length === 2) {     item.cities.find(ite => {      if (ite.value === value[1]) {       if (!ite.cities.length) {        this.$http({         method: 'get',         url: this.API.area + '/' + value[1]        }).then(res => {         ite.cities = res.data.body.map(ite => {          return {           value: ite.areaCode,           label: ite.areaName,          }         })        }).finally(_ => {        })       }      }     })    }   }   this.city.options.find(item => {    if (item.value === value[0]) {     if (item.cities.length) {      b(item)     } else {      a(item)     }     return true    }   })  },  getCityCode () {   return this.cityValue[2]  },  reset () {   this.cityValue = []  },  cityChange (value) {   if (value.length === 3) {    this.$emit('cityChange', value[2])   } else {    this.$emit('cityChange', null)   }  } }, watch: {  areaCode: {   deep: true,   immediate: true,   handler (newVal) {    if (newVal) {     this.getCodeByAreaCode(newVal)    } else {     this.$nextTick(() => {      this.reset()     })    }   }  } }}</script><style lang="less" scoped></style>