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

两种方法

一、使用普通选择器组件

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

<el-form-item label="地区" required>
  <div class="u-f ">
    <el-form-item prop="province" style="margin-right:10px">
      <el-select v-model="addressform.province" placeholder="请选择省" size="small" filterable
        @change="addressSelect(addressform.province,2)">
        <el-option v-for="item in provinceOptions" :key="item.code" :label="item.name" :value="item.name">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item prop="city" style="margin-right:10px">
      <el-select v-model="addressform.city" placeholder="请选择市" size="small" filterable
        @change="addressSelect(addressform.city,3)">
        <el-option v-for="item in cityOptions" :key="item.code" :label="item.name" :value="item.name">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item prop="county" style="margin-right:10px">
      <el-select v-model="addressform.county" placeholder="请选择区" size="small" filterable
        @change="addressSelect(addressform.county,4)">
        <el-option v-for="item in districtOptions" :key="item.code" :label="item.name" :value="item.name">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item prop="street" style="margin-right:10px">
      <el-select v-model="addressform.street" placeholder="请选择镇" size="small" filterable
        @change="addressSelect(addressform.street,5)">
        <el-option v-for="item in townOptions" :key="item.code" :label="item.name" :value="item.name">
        </el-option>
      </el-select>
    </el-form-item>
  </div>
</el-form-item>

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、组件

<template>
  <div class="cascaderArea">
    <el-cascader :props="props" ref="cascader" :disabled='disabled' v-model="addressValue" placeholder="请选择行政区域"
      @change="handleChange" size="small" style="width: 100%"></el-cascader>
  </div>
</template>
<script>
  import {
    getCitys
  } from '@/api/address'
  export default {
    props: {
      addressValue: {
        type: Array,
        default: () => {
          return []
        }
      },
      disabled: {
        type: Boolean,
        default: () => {
          return false
        }
      },
    },
    name: 'cascaderArea',
    data() {
      return {
        selectedOptions: [],
        props: {
          lazy: true,
          lazyLoad: (node, resolve) => {
            const {
              level
            } = node // node 节点数据 
            const nodes = [] // 动态节点
            let type = level == 0 ? "" : node.value // 0 代表第一次请求
            getCitys({
                parentCode: type,
                level: level + 1
              }).then((res) => {
                res.map((item) => {
                  let area = {
                    value: item.code,
                    label: item.name,
                    leaf: node.level >= 3,
                  };
                  nodes.push(area)
                });
                resolve(nodes) // 回调
              })
              .catch((error) => {
                console.log(error)
              })
          },
        }
      }
    },
    watch: {
      addressValue: {
        handler(n, o) {
          this.selectedOptions = n
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      handleChange(values) { // 选择的行政区
        let labels = this.$refs.cascader.getCheckedNodes()[0].pathLabels
        this.$emit('getSelectedOptions', {
          values,
          labels
        })
      }
    }
  }

</script>
<style lang="scss" scoped>
</style>

2、使用

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

<CascaderArea :addressValue="address" :disabled="false"  v-if="address.length>0" @getSelectedOptions='getSelectedOptions' />//使用v-if 防止组件回显异常

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

components: {
  CascaderArea
},

getSelectedOptions(val) {
  this.selectedOptions = val
}