element-china-area-data vue3用法

在 Vue 3 中使用 element-china-area-data 插件的步骤如下：

1. 首先，安装 element-china-area-data 插件。可以通过 npm 或 yarn 进行安装：

   npm install element-china-area-data

或者

   yarn add element-china-area-data

2. 在你的项目中引入 element-china-area-data 插件。可以在 main.js（或其他入口文件）中添加以下代码：

   import Vue from 'vue'
   import Element from 'element-ui'
   import 'element-china-area-data'

   Vue.use(Element)

3. 现在，你可以在你的组件中使用 element-china-area-data 插件提供的数据了。例如，你可以在一个 select 组件中展示中国的省市区数据：

   <template>
     <el-select v-model="selectedProvince" @change="handleProvinceChange">
       <el-option v-for="province in provinces" :key="province" :label="province" :value="province"></el-option>
     </el-select>
   
     <el-select v-model="selectedCity" @change="handleCityChange">
       <el-option v-for="city in cities" :key="city" :label="city" :value="city"></el-option>
     </el-select>
   
     <el-select v-model="selectedDistrict">
       <el-option v-for="district in districts" :key="district" :label="district" :value="district"></el-option>
     </el-select>
   </template>
   
   <script>
   export default {
     data() {
       return {
         selectedProvince: '',
         selectedCity: '',
         selectedDistrict: '',
         provinces: [],
         cities: [],
         districts: []
       }
     },
     methods: {
       handleProvinceChange() {
         // 根据选择的省份，更新城市选项
         this.cities = elementChinaAreaData[this.selectedProvince].map(item => item.name)
         this.selectedCity = ''
         this.selectedDistrict = ''
       },
       handleCityChange() {
         // 根据选择的城市，更新区县选项
         const cityData = elementChinaAreaData[this.selectedProvince].find(item => item.name === this.selectedCity)
         this.districts = cityData ? cityData.children.map(item => item.name) : []
         this.selectedDistrict = ''
       }
     }
   }
   </script>

这样，你就可以在 Vue 3 中使用 element-china-area-data 插件来展示中国的省市区数据了。记得在需要的地方引入对应的组件和样式。希望对你有帮助！如有其他问题，请随时提问。