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

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

1、数据来源

使用的依赖数据为：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管理界面安装：

数据格式为：

2、采用ElementUI-plus实现

（1）采用el-cascader级联选择器实现省市区的选择，效果为：

（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文件封装为自定义组件，效果为：

（2）自定义省市区组件代码，可以参考资源：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，结果可以在控制台进行查看：