VUE：快速实现一个省市区的级联选择器

简介

项目中，大概率会有选择地址的需求，但是在没有组件可用的情况下，就需要自己实现一个，接下来就以VUE项目为基础进行实操。

具体实现

第一步：准备一个全国地址的json文件（上级包含下级的从属关系数据，符合element-ui的select选择器数据要求）。
这里有下载链接
第二步：全局引入element-ui框架。
第三步：页面中引入json文件。
第四步：写好html与JS方法

<template>
  <div>
    <el-select v-model="formData.provinceCode" @change="provinceChange" placeholder="省">
      <el-option v-for="it in provinces" :key="it.value" :label="it.label" :value="it.value"></el-option>
    </el-select>
    <el-select v-model="formData.cityCode" @change="cityChange" placeholder="市" class="address_select">
      <el-option v-for="it in cityList" :key="it.value" :label="it.label" :value="it.value"></el-option>
    </el-select>
    <el-select v-model="formData.areaCode" @change="areaChange" placeholder="区" class="address_select">
      <el-option v-for="it in areaList" :key="it.value" :label="it.label" :value="it.value"></el-option>
    </el-select>
  </div>
</template>

<script>
import json from "@/assets/json/place.json";
export default {
  data() {
    return {
      provinces: json, // 省数据（一个省中包含市的信息，一个市中包含区的信息）
      cityList: [], // 某省下市的列表数据
      areaList: [], // 某市下区的列表数据
      formData: {}
    };
  },
  methods: {
    // 操作：选择省，把省下的市的数据筛出来
    provinceChange(event) {
      let chooseProvince = this.provinces.find(it => {
        if (it.value === event) {
          return it;
        }
      });
      this.$set(this.formData, "province", chooseProvince.label);
      this.cityList = chooseProvince.children;
      this.$set(this.formData, "cityCode", "");
      this.$set(this.formData, "city", "");
      this.$set(this.formData, "areaCode", "");
      this.$set(this.formData, "area", "");
    },
    // 操作：选择市，把市下的区的数据筛出来
    cityChange(event) {
      let chooseCity = this.cityList.find(it => {
        if (it.value === event) {
          return it;
        }
      });
      this.$set(this.formData, "city", chooseCity.label);
      this.areaList = chooseCity.children;
      this.$set(this.formData, "areaCode", "");
      this.$set(this.formData, "area", "");
    },
    // 操作：选择区
    areaChange(event) {
      let chooseArea = this.areaList.find(it => {
        if (it.value === event) {
          return it;
        }
      });
      this.$set(this.formData, "area", chooseArea.label);
      console.log(this.formData);
    }
  }
};
</script>

<style scoped>
</style>

最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！