快捷導(dǎo)航

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

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

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

一、使用普通選擇器組件

1、界面，使用了四個(gè)下拉框分別選擇省市區(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="請(qǐng)選擇省" 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="請(qǐng)選擇市" 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ǐng)選擇區(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="請(qǐng)選擇鎮(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 = ''
//選擇任意下拉框需把下一個(gè)下拉框清空再獲取
  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調(diào)接口獲取下一級(jí) 下方同理
      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)傳給后臺(tái)，街道需要代碼(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;
    }
  })
},

二、使用練級(jí)選擇器動(dòng)態(tài)加載實(shí)現(xiàn)

1、組件

<template>
  <div class="cascaderArea">
    <el-cascader :props="props" ref="cascader" :disabled='disabled' v-model="addressValue" placeholder="請(qǐng)選擇行政區(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é)點(diǎn)數(shù)據(jù) 
            const nodes = [] // 動(dòng)態(tài)節(jié)點(diǎn)
            let type = level == 0 ? "" : node.value // 0 代表第一次請(qǐng)求
            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) // 回調(diào)
              })
              .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使其重新加載，否則會(huì)數(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
}

總結(jié)

到此這篇關(guān)于vue element ui使用選擇器實(shí)現(xiàn)地區(qū)選擇兩種方法的文章就介紹到這了,更多相關(guān)vue elementui實(shí)現(xiàn)地區(qū)選擇內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: