省市区级联

官方文档

参考资料1
参考资料2

安装：npm install element-china-area-data -S
导入：import { regionData, CodeToText,TextToCode} from “element-china-area-data”;

<template>
  <div id="app">
    <div>
      <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange">
      </el-cascader>
    </div>
  </div>
</template>

<script>
  import {
    regionData,
    CodeToText,
    TextToCode
  } from "element-china-area-data";

  export default {
    name: "app",
    data() {
      return {
        options: regionData,
        selectedOptions: []
      };
    },

    methods: {
      handleChange() {
        var loc = "";
        for (let i = 0; i < this.selectedOptions.length; i++) {
          loc += CodeToText[this.selectedOptions[i]];
        }
        alert(loc);
      },
      getCityCode(cityText) {
        var codeArray = [];
        if (cityText != "") {
          var cityArray = cityText.trim().split(" ");

          if (cityArray.length == 1) {
            codeArray.push(TextToCode[cityArray[0]].code);
          } else if (cityArray.length == 2) {
            codeArray.push(TextToCode[cityArray[0]].code);
            codeArray.push(TextToCode[cityArray[0]][cityArray[1]].code);
          } else if (cityArray.length == 3) {
            codeArray.push(TextToCode[cityArray[0]].code);
            codeArray.push(TextToCode[cityArray[0]][cityArray[1]].code);
            codeArray.push(
              TextToCode[cityArray[0]][cityArray[1]][cityArray[2]].code
            );
          }
        }

        return codeArray;
      }

    }
  };
</script>

<template>
  <div>
    <br>
    <!-- 省 -->
    <el-select size="small" style="width: 200px" v-model="selectProv" placeholder="请选择省份" filterable clearable
      @change="getProv">
      <el-option v-for="item in provs" :label="item.label" :value="item.value" :key="item.value">
      </el-option>
    </el-select>
    <!-- 市 -->
    <el-select size="small" style="width: 200px" v-model="selectCity" placeholder="请选择城市" filterable clearable
      @change="getCity">
      <el-option v-for="item in citys" :label="item.label" :value="item.value" :key="item.value">
      </el-option>
    </el-select>
    <!-- 区 -->
    <el-select size="small" style="width: 200px" v-model="selectArea" placeholder="请选择城市" filterable clearable>
      <el-option v-for="item in area" :label="item.label" :value="item.value" :key="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
  import {
    regionData
  } from "element-china-area-data";
  export default {
    data() {
      return {
        provs: regionData,
        citys: [],
        area: [],
        selectProv: "",
        selectCity: "",
        selectArea: "",
      };
    },
    methods: {
      // 选择省
      getProv: function() {
        this.citys = [];
        this.area = [];
        this.selectCity = "";
        this.selectArea = "";
        let cityItem = this.provs.filter(item => item.value === this.selectProv);
        if (cityItem[0]) {
          this.citys = cityItem[0].children;
        }
      },
      // 选择城市
      getCity: function() {
        this.area = [];
        this.selectArea = "";
        let areaItem = this.citys.filter((item) => item.value === this.selectCity);
        if (areaItem[0]) {
          this.area = areaItem[0].children;
        }
      },
    },
  };
</script>

回显

// 处理地图数据
  if (response.data.city == response.data.province) {
    response.data.city = '市辖区'
  }
  // //  城市文字转编码
  if (response.data.province != '' && response.data.city != '') {
    //   //   //这里的selectedOptions 对应着data里的selectedOptions
    this.selectedOptions=[
      TextToCode[response.data.province].code,
      TextToCode[response.data.province][response.data.city].code,
      TextToCode[response.data.province][response.data.city][response.data.district].code]
  }