vue使用element-china-area-data实现省市区联动选择

<template>
	<el-cascader size="large" :options="options" v-model="provinces" @change="handleChange" placeholder="请选择省市区"></el-cascader>
</template>

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

data() {
    return {
     options: regionData,//选择格式
      provinces: [], //省市区绑定数组
    }
   }


methods: {
    // 事件触发
    handleChange(value) {
      console.log(value, "所选code值");
      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);
    },
    }