城市三级联动vue+elementUI详解(对象数组类)

效果图

一.基础数据引入

1.在<script>里提前引入area.js文件
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;
    },

四.代码解析:

解析:

1. 如template展示所示,建立基本结构

2. 点击第一个select即省级选择,触发updateCityStart()函数,清空第二个select即市级数组和第三个select即区级数组的内容,遍历cityDataStart,找到与当前省级对应的二级数组this.cityDataStart[i].sub;,并赋值给cityArrStart即我们之前建立的市级空数组,并默认选择赋值后的cityArrStart的第一项,展示即为"请选择".
   3.当前展示结果如下:
   

3. 点击第二个select即省级选择,触发updateDistrictStart()函数,清空第三个select即区级数组的内容,遍历cityArrStart,找到与当前市级对应的二级数组this.cityArrStart[i].sub;,并赋值给regionArrStart即我们之前建立的市级空数组,并默认选择赋值后的regionArrStart的第一项,展示即为"请选择".

4. 当前展示结果如下:
   

5. 点击第三个select即区级选择,完成城市三级联动选择
   

6. 选择完毕后的值,省:editForm.startProvice,市:editForm.startCity,区:editForm.startDistrict对应的值

7. 解读完毕!

五.备注:

1. <template>代码中使用了form表单验证,只为了required,可以加红心,保证样式一致.特此说明,在于讲清楚城市联动跟form验证无关
2. <template>除了调用selcet的change事件@change="updateCityStart()",额外加上了@click.native="updateCityStart()",给每个el-option绑定点击事件,这里是为了避免数据查询渲染时,点击el-optian不触发updateCityStart()的问题.

3. 备注结束,如有问题,欢迎留言交流!