安装：npm i element-ui -S

回显：https://blog.csdn.net/weixin_42125732/article/details/118103756

import { regionData,CodeToText,TextToCode } from 'element-china-area-data'

areas-zh-cn.js：https://pan.baidu.com/s/1k4bc68Zm-29YDGHCkYkAmA 提取码：kdaa



<template>
  <div>
    <h1>TEST</h1>
    <el-cascader
      :options="options"
      v-model="areas"
      :props="optionProps"
      @change="handleChange"
    ></el-cascader>
    <div>省市区：{{ areanames }}</div>
    <button v-on:click="handleAreaNames">TEST</button>
  </div>
</template>
<script>
import areasZhCn from "@/utils/areas-zh-cn.js";
export default {
  name: "home",
  data() {
    return {
      options: areasZhCn,
      optionProps: { value: "id", label: "name", children: "child" },
      areas: [],
      areanames: undefined,
      lastAreaCode: undefined,
    };
  },
  methods: {
    handleChange(value) {
      if (value.length > 2) {
        this.lastAreaCode = value[2];
      } else if (value.length > 1) {
        this.lastAreaCode = value[1];
      } else {
        this.lastAreaCode = value[0];
      }
    },
    handleAreaNames() {
      let carea = this.lastAreaCode + "";
      let a1 = parseInt(carea.substring(0, 2) + "0000");
      let a2 = parseInt(carea.substring(0, 4) + "00");
      let a3 = parseInt(carea);

      // let ars = [a1, a2, a3];
      // this.areas = ars;

      let n1 = areasZhCn.filter(function (n) {
        return n.id == a1;
      })[0];

      let n2 = undefined;
      if (n1 != undefined && n1.child != undefined) {
        n2 = n1.child.filter(function (n) {
          return n.id == a2;
        })[0];
      }

      let n3 = undefined;
      if (n2 != undefined && n2.child != undefined) {
        n3 = n2.child.filter(function (n) {
          return n.id == a3;
        })[0];
      }
      this.areanames =
        (n1 ? n1.name : "") + (n2 ? n2.name : "") + (n3 ? n3.name : "");
    },
  },
  created: function () {},
};
</script>