VUE3.0学习系列随笔（十）：省市区选择组件

古城微笑少年丶 2022-10-28 01:29 346阅读 0赞

### VUE3.0学习系列随笔（十）：省市区选择组件 ###

#### 1、数据来源 ####

使用的依赖数据为：`element-china-area-data`，总共有六种数据模式  
详情请参考官网为：[https://www.npmjs.com/package/element-china-area-data][https_www.npmjs.com_package_element-china-area-data]  
（1）命令行窗口安装依赖，命令为：

npm install element-china-area-data -S

（2）Vue3.0 UI管理界面安装：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]  
数据格式为：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 1]

#### 2、采用ElementUI-plus实现 ####

（1）采用el-cascader级联选择器实现省市区的选择，效果为：  
![在这里插入图片描述][20210205112948978.gif]  
（2）实现代码为：

<template>
      <div>
        <el-cascader size='large' :options='options' v-model='selectedOptions' @change='addressChange'></el-cascader>
      </div>
    </template>
    
    <script> import { regionData, CodeToText } from 'element-china-area-data' export default { name: 'Region', data () { return { options: regionData, selectedOptions: ['110000', '110100', '110101'] } }, methods: { addressChange (arr) { console.log(this.selectedOptions) console.log(arr) console.log(CodeToText[arr[0]], CodeToText[arr[1]], CodeToText[arr[2]]) } } } </script>

#### 3、使用自定义组件实现 ####

（1）采用自定义CSS样式实现省市区三级区域选择，可以实时监控选择数据，并将Vue文件封装为自定义组件，效果为：  
![在这里插入图片描述][20210205142624907.gif]  
（2）自定义省市区组件代码，可以参考资源：[https://download.csdn.net/download/qq\_26666947/15077784][https_download.csdn.net_download_qq_26666947_15077784]  
（3）下载组件文件，在Vue3.0项目中components文件夹下，组件采用v-model进行数据双向绑定，因此可以向普通组件一样进行局部引用，代码为：

<template>
      <div class='about'>
        <region-select v-model='region'></region-select>
      </div>
    </template>
    
    <script> import RegionSelect from '@/components/RegionSelect.vue' export default { name: 'About', components: { RegionSelect }, data () { return { region: String } }, watch: { region () { console.log(this.region) } } } </script>

每次选择的省市区值为：region，结果可以在控制台进行查看：  
![在这里插入图片描述][2021020514473742.jpg]

[https_www.npmjs.com_package_element-china-area-data]: https://www.npmjs.com/package/element-china-area-data
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]: /images/20221024/c31bea2465f84b17be3d25b122f5fd30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 1]: /images/20221024/2d0e8db901104f81ba1bc93532562cb0.png
[20210205112948978.gif]: /images/20221024/7a81b0521e1d4662b37640f950a192e8.png
[20210205142624907.gif]: /images/20221024/9c96fa171e3f4781ab54836f8adff40c.png
[https_download.csdn.net_download_qq_26666947_15077784]: https://download.csdn.net/download/qq_26666947/15077784
[2021020514473742.jpg]: /images/20221024/d1307791a8f342e89e88bccc01e9d9ed.png