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

小编给大家分享一下如何实现基于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> 
                                                                             

实现效果如下（动图）：

以上是"如何实现基于Vue+ElementUI的省市区地址选择通用组件"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！