vue实现省市区的三级联动效果,这里使用的时element-ui的el-select组件,所以使用本组件的小伙伴记得依赖element-ui组件库
具体命令如下:
npm install element-ui -S
//然后在main.js中引入
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css";
//注册插件
Vue.use(ElementUI)
准备工作做完之后,就是代码的编写了,可以先看一下效果:
具体实现代码如下:
<!-- 三级联动 -->
<template>
<div>
<el-form ref="form" :model="form" label-width="120px">
<el-select
v-model="form.province"
placeholder="请选择省"
@change="changePro"
>
<el-option
v-for="item in addressData"
:key="item.code"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
<el-select
v-model="form.city"
placeholder="请选择市"
@change="changeCity"
>
<el-option
v-for="item in cityData"
:key="item.code"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
<el-select
v-model="form.district"
placeholder="请选择区"
@change="changeArea"
>
<el-option
v-for="item in areaData"
:key="item.code"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form>
</div>
</template>
<script>
import address from "@/untils/address.json"; //全国省市区街道数据
export default {
data() {
return {
// 省数据
addressData: [],
// 市数据
cityData: [],
// 区数据
areaData: [],
// 街道数据
form: {
// 省
province: "",
// 市
city: "",
// 区
district: "",
},
};
},
created() {
// 省份数据初始化
this.addressData = address;
},
methods: {
// 省份更改
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>
其中所需要的address.json文件下载地址如下:
网盘地址:链接:https://pan.baidu.com/s/1Ti_i0zlrcxUuG7Pb6dXsWQ
提取码:6t2j
如果还想要uniapp的三级联动,可以查看我的另一篇博客: