1.下载省市区数据的插件

npm install element-china-area-data -S

2.在script中引入

import { regionData } from "../../node_modules/element-china-area-data";

在这里我只用到regionData(省市区三级联动数据且不带 "全部" 字样选项)，需要其他数据的可以按需引入。

element-china-area-data 插件主要分成四种展示格式：

• provinceAndCityData
• provinceAndCityDataPlus
• regionData
• regionDataPlus

1. provinceAndCityData 是省市两级联动数据且不带 "全部" 字样选项。

2. provinceAndCityDataPlus 是省市两级联动数据且显示 "全部" 字样选项。

3. regionData 是省市区三级联动数据且不带 "全部" 字样选项。

4. regionDataPlus 是省市区三级联动数据且显示 "全部" 字样选项。

3.代码

          <el-form>
            <el-form-item label="地区" :label-width="formLabelWidth">
                <el-select
                  v-model="selectProvince"
                  placeholder="请选择省"
                  
                  style="width: 145px"
                >
                  <el-option
                    v-for="item in provinces"
                    size="small"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    @click.native="changeProvince()"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-model="selectCity"
                  placeholder="请选择市"
                  style="width: 145px"
                >
                  <el-option
                    v-for="item in cities"
                    size="small"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    @click.native="changeCity"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-model="selectArea"
                  placeholder="请选择区"
                  style="width: 145px"
                >
                  <el-option
                    v-for="item in area"
                    size="small"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
          </el-form>

data() {
    return {
      //省市区联动下拉框
      provinces: regionData,
      cities: [],
      area: [],
      selectProvince: "",
      selectCity: "",
      selectArea: "",
      methods: {
    changeProvince() {
       //console.log(this.provinces)
       //console.log(this.selectProvince)
      this.cities = [];
      this.area = [];
      this.selectCity = "";
      this.selectArea = "";
      let cityItem = this.provinces.filter(
        (item) => item.value === this.selectProvince
      );
      if (cityItem[0]) {
        this.cities = cityItem[0].children;
      }
    },
    changeCity() {
      console.log("城市选择")
      console.log(this.selectCity)
      this.area = [];
      this.selectArea = "";
      let areaItem = this.cities.filter(
        (item) => item.value === this.selectCity
      );
      if (areaItem[0]) {
        this.area = areaItem[0].children;
      }
    },
  },

4.最终效果