基于Vue+ElementUI的省市区地址选择通用组件

一、缘由

在项目开发过程中，有一个需求是省市区地址选择的功能，一开始想的是直接使用静态地址资源库本地打包，但这种方式不方便维护，于是放弃。后来又想直接让后台返回全部地址数据，然后使用级联选择器进行选择，但发现数据传输量有点大且处理过程耗时，于是又摒弃了这种方法。最后还是决定采用异步的方式进行省市区地址选择，即先查询省份列表，然后根据选择的省份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 级联选择器的单选择框实现方案

最终效果如下（动图）：

截图：

三、基于el-select选择器的多选择框实现方案

lt;template>
 

  
   
    
     
     
    
   
   
    
     
     
    
   
   
    
     
     
    
   
  
 

实现效果如下（动图）：

四、总结

两个组件都实现了双向绑定，根据场景不同可以使用不同的组件，如果读者有需求，根据自己的接口和场景进行修改即可。

当拓展至大洲-国家-省-市-区-街道等时，第一种级联选择器的方案就会暴露出拓展性较差的问题，随着层级加深，数据结构会变得复杂，而第二种方案明显可拓展性更强