省市區三級聯動,史上最牛逼,基於element ,帶註釋

<template>
  <div class="addSelect">
    <el-select
      placeholder="請選擇省"
      style="width:33%;"
      v-model="modelFiled.province"
      clearable
      filterable
      @change="getAddrData($event,'province')"
      ref="province"
    >
      <el-option
        v-for="(item,index) in addrList.province"
        :key="index"
        :label="item.name"
        :value="item.id"
      ></el-option>
    </el-select>
    <el-select
      ref="city"
      placeholder="請選擇市"
      style="width:33%;"
      @change="getAddrData($event,'city')"
      v-model="modelFiled.city"
      clearable
      filterable
    >
      <el-option
        v-for="(item,index) in addrList.city"
        :key="index"
        :label="item.name"
        :value="item.id"
      ></el-option>
    </el-select>
    <el-select
      ref="area"
      placeholder="請選擇區/縣"
      style="width:33%;"
      v-model="modelFiled.area"
      clearable
      filterable
      @change="getAddrData($event,'area')"
    >
      <el-option
        v-for="(item,index) in addrList.area"
        :key="index"
        :label="item.name"
        :value="item.id"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
//  import { addrData } from './addrData.js'  // 本地數據json
import { queryCityByLevel } from '@/api/common'  //遠程數據接口

export default {

  data () {
    return {
      modelFiled: {
        province: '',
        provinceName: '',
        city: '',
        cityName: '',
        area: '',
        areaName: ''
      },
      addrList: {
        province: [],
        city: [],
        area: []
      },
      keyObj:{
        1:'province',
        2:'city',
        3:'area',
      }
    }
  },
  mounted () {
    this.getAddrData()
  },
  methods: {
    // 用於獲取省市縣
    async getAddrData (parentid, key) {

      // level:1是獲取省,2是獲取市,3是獲取縣
      let level = 1

      // === 聯動數據初始化start ===
      if (key === 'province') {
        this.addrList.city = []
        this.modelFiled.city = ''
        this.modelFiled.provinceName = ''  // 防止是點擊clear
        // this.$forceUpdate()
        level = 2
      }

      if (key === 'city') {
        
        level = 3
      }

      if (key !== 'area') {

        this.modelFiled.cityName = '' 
        // 不是縣/區改變,都清空縣的值,   
        this.modelFiled.area = ''
        this.addrList.area = []
      }

      this.modelFiled.areaName = ''
      // === 聯動數據初始化end ===

      if (parentid) {
        this.modelFiled[key + 'Name'] = this.$refs[key].getOption(parentid).$options.propsData.label
      }

      this.$emit('addrChange', this.modelFiled)

      // 如果是縣改變或者是點了清空都不請求數據
      if (key === 'area' || parentid === '')
        return
       
      // 獲取下拉框數據
      const { data } = await queryCityByLevel(level, parentid)

      if (data.status === 0) {
         
        this.addrList[this.keyObj[level]] = data.data
      }
    },

  }
}
</script>

<style lang="scss" scoped>
.addSelect {
  display: flex;
}
</style>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章