vue3 使用element-china-area-data

### 集成 `element-china-area-data` 实现省市区级联选择 为了在 Vue3 项目中集成 `element-china-area-data` 并实现省市区级联选择，需按照如下方式配置： #### 安装依赖库 首先安装所需的 npm 包。这包括 Element Plus 和 `element-china-area-data`。 ```bash npm install element-plus element-china-area-data ``` #### 引入并注册 Element Plus 组件 确保已经在项目的入口文件（通常是 main.js 或者 main.ts）里引入了 Element Plus 的样式以及组件，并进行了全局注册[^2]。 ```javascript import { createApp } from 'vue' import App from './App.vue' // 引入ElementPlus及其CSS import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' const app = createApp(App) app.use(ElementPlus) app.mount('#app') ``` #### 使用 `element-china-area-data` 数据源 接着，在需要展示省市区选择的地方导入 `regionData`，并将它绑定到 `<el-cascader>` 组件上作为选项列表[^1][^3]。 ```html <template> <div id="app"> <!-- 级联选择器 --> <el-cascader placeholder="请选择地区" :options="regionData" v-model="selectedOptions" @change="handleChange" /> <!-- 显示选中的地址文字描述 --> <p>已选择: {{ selectedAddress }}</p> </div> </template> <script setup lang="ts"> import { ref, computed } from 'vue'; import { ElCascader } from 'element-plus'; import { regionData, codeToText } from 'element-china-area-data'; let selectedOptions = ref([] as string[]); // 计算属性用于显示所选地区的名称 const selectedAddress = computed(() => { let result = ''; if (selectedOptions.value.length === 0) return ''; for(const areaCode of selectedOptions.value){ result += `${codeToText[areaCode]} `; } return result.trim(); }); function handleChange(value:string[]){ console.log('选择了:', value); } </script> ``` 上述代码展示了如何通过 `v-model` 将用户的选择保存至 `selectedOptions` 变量中；并通过计算属性 `selectedAddress` 来动态更新页面上的文本提示信息。当用户改变选择时会触发 `handleChange()` 方法来处理逻辑变化[^4]。