省市区联动

npm install element-china-area-data -S

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

<script>
import { regionData, codeToText } from "element-china-area-data";
export default {
  data() {
    return {
      options: regionData,
      selectedOptions: [],
    };
  },

  methods: {
    handleChange(value) {
      this.getCodeToText(value);
    },
    getCodeToText(codeArray) {
      let area = "";
      switch (codeArray.length) {
        case 1:
          area += codeToText[codeArray[0]];
          break;
        case 2:
          area += codeToText[codeArray[0]] + "/" + codeToText[codeArray[1]];
          break;
        case 3:
          area +=
            codeToText[codeArray[0]] +
            "/" +
            codeToText[codeArray[1]] +
            "/" +
            codeToText[codeArray[2]];
          break;
        default:
          break;
      }
      console.log(area);
    },
  },
};
</script>