elementuiplus+vue3 使用node包【element-china-area-data】实现全国三级地址级联选择 （同时解决import CodeToText错误）

这种全国级联选项，大部分程序员应该都用过，自己也写过，这次我直接使用一个现有的轮子，避免大家重复造轮子
使用的包如下 element-china-area-data ,笔者一直使用的是ElementUI Plus和vue3做项目，所以很自然选择了这个包，这个包 我直接安装了最新版本

npm install element-china-area-data -S
//这里 我不推荐大家使用这个安装最新版本(我深受其害，网上找的信息都是这个指令
//但是这个包经过迭代，部分import的数据会报错，建议大家直接引用我现在的版本，这样子代码可以直接copy
//使用以下的命令
npm install element-china-area-data@6.1.0
//6.1.0这个版本 我再2024-02-22获取是最新版本

接下里就是写相关的代码了，使用了elementui Plus的级联组件 el-cascader

上代码

<template>
  <div>
      <el-cascader 
      size="large" 
      :options="options" 
      v-model="selectedOptions" 
      @change="handleChange"/>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
//import { regionData, CodeToText } from 'element-china-area-data' 
//新版本中 CodeToText变成了codeToText
​import { regionData, codeToText} from 'element-china-area-data'

const options = ref(regionData)
const selectedOptions = ref([])
​
const handleChange = () => {
  console.log(selectedOptions.value)
  if (
    selectedOptions.value[0] != null &&
    selectedOptions.value[1] != null &&
    selectedOptions.value[2] != null
  ) {
    const str =
      codeToText[selectedOptions.value[0]] +
      '/' +
      codeToText[selectedOptions.value[1]] +
      '/' +
      codeToText[selectedOptions.value[2]]
    console.log(str)
  }
}
</script>

更多的级联内容可以参考大佬的信息:
https://blog.csdn.net/weixin_55992854/article/details/126052320