vue.js使用element-ui 和 el-cascader

安装：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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

<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>