vue element ui使用選擇器實現(xiàn)地區(qū)選擇兩種方法

更新時間：2023年09月30日 09:24:17 作者：菜了真的

這篇文章主要給大家介紹了關于vue element ui使用選擇器實現(xiàn)地區(qū)選擇的兩種方法,Element UI是一套基于Vue.js開發(fā)的UI組件庫,其中包含了地區(qū)選擇器(Cascader)組件,需要的朋友可以參考下

一、使用普通選擇器組件

1、界面，使用了四個下拉框分別選擇省市區(qū)街道

<el-form-item label="地區(qū)" 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="請選擇區(qū)" 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="請選擇鎮(zhèn)" 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、方法

//地區(qū)下拉框選擇事件
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) { //此需求是省市區(qū)需要中文漢字(name)傳給后臺，街道需要代碼(code)
    this.addressform.addressCode = this.townOptions.find(a => a.name == data).code
    return
  }
  this.getCitys(addressCode, index)
},
//獲取地區(qū)下拉框方法
getCitys(code = '', level = 1) {
  getCitys({//獲取地區(qū)的接口
    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;
    }
  })
},

二、使用練級選擇器動態(tài)加載實現(xiàn)

1、組件

<template>
  <div class="cascaderArea">
    <el-cascader :props="props" ref="cascader" :disabled='disabled' v-model="addressValue" placeholder="請選擇行政區(qū)域"
      @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 節(jié)點數(shù)據(jù) 
            const nodes = [] // 動態(tài)節(jié)點
            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) { // 選擇的行政區(qū)
        let labels = this.$refs.cascader.getCheckedNodes()[0].pathLabels
        this.$emit('getSelectedOptions', {
          values,
          labels
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
</style>

2、使用

如果有回顯的需求，需要組件上加上v-if使其重新加載，否則會數(shù)據(jù)回顯異常

<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
}