基于基于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 级联选择器的单选择框实现方案级联选择器的单选择框实现方案
<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',
weixin_38697979
- 粉丝: 6
- 资源: 947
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0