好资源导航 » 文章资讯 » 基于Vue+ElementUI的省市区地址选择通用组件

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

2023-08-08 13:45:04 72

一、缘由

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

实现效果如下（动图）：

四、总结

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

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐