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的三级联动，可以查看我的另一篇博客：

uniapp省市区三级联动，uview组件，向上唤起式，内附地址文件_F_cy的博客-CSDN博客