vue+element ui 实现省市县联动

1.选element ui 的Cascader级联选择器中的hover选择

<el-cascader
  v-model="selectedOptions"
  :options="options"
  :props="{ expandTrigger: 'hover' }"
  @change="handleChange"></el-cascader>

2. 下载并注册依赖element-china-area-data，命令如下：（npm install XXX -S：命令指的是下载依赖并注册）

npm install element-china-area-data -S

3.引入element ui的依赖element-china-area-data 命令（ 下载并注册依赖）

import { regionData, CodeToText, TextToCode } from 'element-china-area-data'

element ui的组件element-china-area-data包含有：

1.provinceAndCityData:省市二级联动数据（不带"全部"选项）

2.regionData:省市区三级联动数据（不带"全部"选项）

3.provinceAndCityDataPlus:省市区三级联动数据（带"全部"选项）

4.regionDataPlus:省市区三级联动数据（带"全部"选项）

这里的全选指的是value值是空字符串

CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市；

TextToCode是个大对象，属性是汉字，属性值是区域码； 

用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105

引用自https://blog.csdn.net/ld395353765/article/details/117037451

在data中添加：

data () {
  return {
    selectedOptions: [],
    options: regionData,
    form: {
      provinces: '',
      city: '',
      area: ''
    }}

在method方法中添加：

methods: {
  handleChange () {
    this.form.provinces = CodeToText[this.selectedOptions[0]]
    this.form.city = CodeToText[this.selectedOptions[1]]
    this.form.area = CodeToText[this.selectedOptions[2]]
  }}

页面显示: