vuecli中结合element ui 实现省市区分开选择，联动选择可以使用element-china-area-data

1.html

<template>
  <div class="mains">
              <div class="d-flex">
            <el-select
              v-model="form.valueProvince"
              @change="changeProvince"
              placeholder="请选择省"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="form.valueCity"
              @change="changeCity"
              placeholder="请选择市"
            >
              <el-option
                v-for="item in cityOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="form.valueOrigin"
              @change="changeOrigin"
              placeholder="请选择区"
            >
              <el-option
                v-for="item in originOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>

  </div>
</template>

js

<script>
import jsonData from "../../assets/js/china_address.js";
export default {
  data() {
    return {
      form: {
        selectedOptions: [],
        addtions: {},

        valueProvince: "", // 所选的省的value
        valueCity: "", // 所选的市的value
        valueOrigin: "", // 所选的区的value

        lableProvince: "", //所选的省的lable值
        lableCity: "", //所选的省的lable值
        lableOrigin: "", //所选的省的lable值
      },
      provinceList: [], // 省列表,省下拉框数据
      cityList: [], // 市列表
      originList: [], // 区列表
    };
  },
  created() {
    this._getJsonData();
  },
  methods: {
    // 选择省
    changeProvince(val) {
      var obj = {};
      obj = this.provinceList.find(function (item) {
        return item.value === val;
      });
      // console.log(obj.label); //label值
      this.form.lableProvince = obj.label;
      this.provinceList.forEach((province, index) => {
        if (val.toString() === this.provinceList[index].value) {
          this.cityOptions = this.provinceList[index].children;
          this.form.valueCity = "";
          this.originOptions = this.provinceList[index].children[0].children;
          this.form.valueCity = "";
          this.form.valueOrigin = "";
          // 如果选中省之后想市区默认选中
          // this.valueCity = this.provinceList[index].children[0].value
          // this.valueOrigin = this.provinceList[index].children[0].children[0].value
        }
      });
    },

    // 选择市
    changeCity(val) {
      var obj = {};
      obj = this.cityOptions.find(function (item) {
        return item.value === val;
      });
      this.form.lableCity = obj.label;
      this.cityList.forEach((city, index) => {
        if (val.toString() === this.cityList[index].value) {
          this.originOptions = this.cityList[index].children;
          this.form.valueOrigin = "";
          //如果选中市之后默认区选中
          // this.valueOrigin = this.cityList[index].children[0].value
        }
      });
    },

    // 选择区
    changeOrigin(val) {
      var obj = {};
      obj = this.originOptions.find(function (item) {
        return item.value === val;
      });
      this.form.lableOrigin = obj.label;
      this.form.valueOrigin = val;
    },
    // 初始化省市区数据
    _getJsonData() {
      this.provinceList = [];
      this.cityList = [];
      this.originList = [];
      jsonData.forEach((item) => {
        if (item.value.match(/0000$/)) {
          this.provinceList.push({
            value: item.value,
            label: item.name,
            children: [],
          });
        } else if (item.value.match(/00$/)) {
          this.cityList.push({
            value: item.value,
            label: item.name,
            children: [],
          });
        } else {
          this.originList.push({
            value: item.value,
            label: item.name,
          });
        }
      });
      for (let index in this.provinceList) {
        for (let index1 in this.cityList) {
          if (
            this.provinceList[index].value.slice(0, 2) ===
            this.cityList[index1].value.slice(0, 2)
          ) {
            this.provinceList[index].children.push(this.cityList[index1]);
          }
        }
      }
      for (let item1 in this.cityList) {
        for (let item2 in this.originList) {
          if (
            this.originList[item2].value.slice(0, 4) ===
            this.cityList[item1].value.slice(0, 4)
          ) {
            this.cityList[item1].children.push(this.originList[item2]);
          }
        }
      }
    },
  },
};
</script>