vue element ui使用选择器实现地区选择

两种方法

一、使用普通选择器组件

1、界面，使用了四个下拉框分别选择省市区街道

2、方法

//地区下拉框选择事件
addressSelect(data, index) {
  let addressCode = ''
//选择任意下拉框需把下一个下拉框清空再获取
  switch (index) {
    case 2:
      this.cityOptions = []
      this.districtOptions = []
      this.townOptions = []
      this.addressform.city = ''
      this.addressform.county = ''
      this.addressform.street = ''
      addressCode = this.provinceOptions.find(a => a.name == data).code//获取code调接口获取下一级 下方同理
      break;
    case 3:
      this.districtOptions = []
      this.townOptions = []
      this.addressform.county = ''
      this.addressform.street = ''
      addressCode = this.cityOptions.find(a => a.name == data).code
      break;
    case 4:
      this.townOptions = []
      this.addressform.street = ''
      addressCode = this.districtOptions.find(a => a.name == data).code
      break;
    default:
      break;
  }
  if (index == 5) { //此需求是省市区需要中文汉字(name)传给后台，街道需要代码(code)
    this.addressform.addressCode = this.townOptions.find(a => a.name == data).code
    return
  }
  this.getCitys(addressCode, index)
},



//获取地区下拉框方法
getCitys(code = '', level = 1) {
  getCitys({//获取地区的接口
    parentCode: code + '',
    level: level
  }).then(res => {
    switch (level) {
      case 1:
        this.provinceOptions = res
        break;
      case 2:
        this.cityOptions = res
        break;
      case 3:
        this.districtOptions = res
        break;
      case 4:
        this.townOptions = res
        break;
      default:
        break;
    }
  })
},

二、使用练级选择器动态加载实现

1、组件

2、使用

如果有回显的需求，需要组件上加上v-if使其重新加载，否则会数据回显异常

//使用v-if 防止组件回显异常

import CascaderArea from "@/components/SelectAddress/index.vue";//引入

components: {
  CascaderArea
},

getSelectedOptions(val) {
  this.selectedOptions = val
}