城市三级联动vue+elementUI详解
- 效果图
- 一.基础数据引入
- 二.template内的代码
- 三.methods内的代码
- 四.代码解析:
- 五.备注:
效果图
一.基础数据引入
1.在<script>
里提前引入area.js
文件
import area from "../api/area.js";
2.同时在data()
里定义一个变量cityDataStart
接收所有城市的对象数组,并建立两个空数组来对应接收市级数组cityArrStart: [],
和区级数组 regionArrStart: [],
data() {
return {
// 城市联动
// 发货
cityDataStart: {},
cityArrStart: [],
regionArrStart: [],
}
3.在created() { }
创建时,给cityDataStart
赋值
created() {
this.cityDataStart = area.arrAll;
}
4.准备工作结束.
二.template内的代码
<template>
代码如下:
<el-form-item label="发货省市:" required>
<div style="display:flex">
<el-select v-model="editForm.startProvice" @change="updateCityStart()">
<el-option
v-for="(option,index) in cityDataStart"
:value="option.name"
:key="index"
@click.native="updateCityStart()"
>{{ option.name }}</el-option>
</el-select>
<el-select v-model="editForm.startCity" @change="updateDistrictStart()">
<el-option
v-for="(option,index) in cityArrStart"
:value="option.name"
:key="index"
@click.native="updateDistrictStart()"
>{{ option.name }}</el-option>
</el-select>
<el-select v-model="editForm.startDistrict">
<el-option
v-for="(option,index) in regionArrStart"
:value="option.name"
:key="index"
>{{ option.name }}</el-option>
</el-select>
</div>
</el-form-item>
三.methods内的代码
// 发货地址
// 更新省后,确定市的范围
updateCityStart() {
// console.log(this.cityArrStart);
this.editForm.startCity = "";
this.editForm.startDistrict = "";
for (var i in this.cityDataStart) {
if (this.cityDataStart[i].name == this.editForm.startProvice) {
this.cityArrStart = this.cityDataStart[i].sub;
}
}
this.editForm.startCity = this.cityArrStart[0].name;
},
// 更新市后,确定区的范围
updateDistrictStart() {
// console.log(this.regionArrStart);
this.editForm.orgAddressDistrict = "";
for (var i in this.cityArrStart) {
if (this.cityArrStart[i].name == this.editForm.startCity) {
this.regionArrStart = this.cityArrStart[i].sub;
}
}
this.editForm.orgAddressDistrict = this.regionArrStart[0].name;
},
四.代码解析:
解析:
- 如template展示所示,建立基本结构
- 点击第一个
select
即省级选择,触发updateCityStart()
函数,清空第二个select
即市级数组和第三个select
即区级数组的内容,遍历cityDataStart
,找到与当前省级对应的二级数组this.cityDataStart[i].sub;
,并赋值给cityArrStart
即我们之前建立的市级空数组,并默认选择赋值后的cityArrStart
的第一项,展示即为"请选择".
3.当前展示结果如下: - 点击第二个
select
即省级选择,触发updateDistrictStart()
函数,清空第三个select
即区级数组的内容,遍历cityArrStart
,找到与当前市级对应的二级数组this.cityArrStart[i].sub;
,并赋值给regionArrStart
即我们之前建立的市级空数组,并默认选择赋值后的regionArrStart
的第一项,展示即为"请选择". - 当前展示结果如下:
- 点击第三个
select
即区级选择,完成城市三级联动选择 - 选择完毕后的值,省:
editForm.startProvice
,市:editForm.startCity
,区:editForm.startDistrict
对应的值 - 解读完毕!
五.备注:
-
<template>
代码中使用了form表单验证,只为了required
,可以加红心,保证样式一致.特此说明,在于讲清楚城市联动跟form验证无关 -
<template>
除了调用selcet
的change事件@change="updateCityStart()"
,额外加上了@click.native="updateCityStart()"
,给每个el-option
绑定点击事件,这里是为了避免数据查询渲染时,点击el-optian
不触发updateCityStart()
的问题.