昨天收到一个新的需求，需要选择地址，因此就要做一个省市区三级联动的组件来使用，在网上找了一些资源，然后进行了尝试，没想到就这么成功了！要记录一下方便后续使用。

效果如下：

下面就记录一下代码叭！

一、封装vue组件

<!-- 地址选择 & 省市区三级联动 -->
<template>
<el-form ref="form" :model="form" label-width="120px"><el-row><el-selectv-model="form.province"placeholder="请选择省"@change="changePro"><el-optionv-for="item in addressData":key="item.code":label="item.name":value="item.name"></el-option></el-select><el-selectv-model="form.city"placeholder="请选择市"@change="changeCity"><el-optionv-for="item in cityData":key="item.code":label="item.name":value="item.name"></el-option></el-select><el-selectv-model="form.district"placeholder="请选择区"@change="changeArea"><el-optionv-for="item in areaData":key="item.code":label="item.name":value="item.name"></el-option></el-select><el-input placeholder="详细地址" v-model="form.detail" style="width:200px;"></el-input></el-row><!-- <h3>测试当前选中地址：{{result}}</h3> -->
</el-form>
</template><script>
import address from "@/utils/address/address.json"; //全国省市区街道数据
export default {data() {return {//  省数据addressData: [],//  市数据cityData: [],// 区数据areaData: [],};},props:{// 街道数据form:{province: "",// 市city: "",// 区district: "",//详细地址detail:"",}},created() {// 省份数据初始化this.addressData = address;// console.log("this.form",this.form)if (this.form.province != "") {let cityData = this.addressData.filter(item => item.name == this.form.province)if (cityData.length) {this.cityData = cityData[0].childrenlet areaData = this.cityData.filter(item => item.name == this.form.city)if (areaData.length) {this.areaData = areaData[0].children}}}},computed:{//选择结果result(){if(!this.form.district){return ''}else if(this.form.district && this.form.detail){return ''+this.form.province+","+this.form.city+","+this.form.district+","+this.form.detail}else{return ''+this.form.province+","+this.form.city+","+this.form.district}}},methods: {reset(){this.form= {// 省province: "",// 市city: "",// 区district: "",//详细地址detail:"",}},// 省份更改changePro(e) {// 从省中过滤出市的数据this.cityData = this.addressData.filter((item) => {return item.name == e;})[0].children;// 省发生改变的时候 清空输入框市区街道的内容this.form.district = "";this.form.city = "";// 省发生更改时 该表空区街道数据的内容this.areaData = [];},// 市更改changeCity(e) {// 获取到区的数据this.areaData = this.cityData.filter((item) => item.name == e)[0].children;// 清空数据后面对应数组的数据this.form.district = "";},// 区更改changeArea(e) {let temp = this.areaData.filter((item) => item.name == e);// 获取到区的code码this.form.regionalNumber = temp[0].code;// 获取到街道的数据this.jdData = this.areaData.filter((item) => item.name == e)[0].children;},},
};
</script><style lang="scss" rel="stylesheet/scss" scoped>
.el-row{display: inline;
}
.el-row{display: inline-flex;flex: auto;.el-select {margin: 0 20px 0 0;width: 122px;}
}
</style>

二、在页面中引用

      <el-row><el-col><el-form-item label="联系地址" prop="contactTypeFlex3" v-model="ruleForm.contactTypeFlex3"><checkAddress v-model="ruleForm.contactTypeFlex3" ref="address"/></el-form-item></el-col></el-row>

    watch:{ruleForm:{deep:true,handler(){this.ruleForm.contactTypeFlex3=this.$refs.address.resultconsole.log(this.ruleForm.contactTypeFlex3)}}},

三、去网上找个Address.json文件放进去就好了

后面因为需要动态绑定，以及处理回显问题，就需要进行一些其它的处理：

解决elementui 的省市区级联选择器数据不回显问题http://t.csdn.cn/lVPn6

vue实现省市区三级联动地址选择组件相关推荐

vue实现省市区三级联动地址选择
导航利用select下拉框实现 CV通道省市区三级json 凑字数之前由于产品需求,自己去实现了省市区三级联动的选择,但是总感觉有所欠缺,后来花了一点时间整理,特此分享下我的思路,望大佬们指教. ...
element-ui省市区三级联动：选择即改变
element-ui 省市区三级联动:选择即改变注意: 阅读本文,经验传授: vue.js单组件引入外部或自定义的 .js文件,并调用文件内三级联动的 json数据: 自定义设置默认地址,结合js ...
vue 省市区三级联动 antd 级联组件 Cascader
需求与功能该功能实现了中国内的省市区的三级联动,基于 antd-vue 中的 Cascader 做的组件,支持原有的所有功能效果展示支持联想搜索支持显示部分省份例子(本例子是基于 ant ...
layui省市区三级联动城市选择
index.html <!doctype html> <html> <head> <meta charset="utf-8"> &l ...
vue+elementui+v-distpicker实现城市三级联动/地址选择
由于项目中有城市选择的业务需求,百度之下发现了v-distpicker,这个插件不错,基本能满足业务需求,但是它使用了原生的select标签,样式很难看,不同的浏览器上显示的效果也不尽相同,而且貌似没 ...
【Android笔记】使用v5.2.2最新版CityPickerView实现省市区三级联动选择
目录 1. CityPickerView开源框架简介 2. CityPickerView在Android程序中的使用 2.1 build.gradle(Module:app)添加依赖 2.1.1 安装 ...
php地址选择插件,微信小程序中关于三级联动地址选择器的实例分享
本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人 ...
省市区三级联动选择组件前端实现
一代码 <template><el-dialog:title="!dataForm.id ? '新增' : !disabled ? '修改' : '查看'":c ...

vue实现省市区三级联动地址选择组件

一、封装vue组件

二、在页面中引用

三、去网上找个Address.json文件放进去就好了

vue实现省市区三级联动地址选择组件相关推荐

最新文章

热门文章

vue实现省市区三级联动地址选择组件

一、 封装vue组件

二、在页面中引用

三、去网上找个Address.json文件放进去就好了

vue实现省市区三级联动地址选择组件相关推荐

最新文章

热门文章

一、封装vue组件