Vue如何實現(xiàn)省市區(qū)級聯(lián)下拉選擇框

這篇文章將為大家詳細講解有關Vue如何實現(xiàn)省市區(qū)級聯(lián)下拉選擇框，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

具體內(nèi)容如下

以（Vue下拉選擇框Select組件二）為基礎實現(xiàn)省市區(qū)級聯(lián)下拉選擇框組件

（業(yè)務需要，固定省份選擇為貴州，沒有此業(yè)務，不傳disabled屬性即可）

效果圖如下：

 ①創(chuàng)建級聯(lián)下拉選擇Cascader.vue組件

<template>
  <div class="m-cascader-wrap">
    <Select
      class="mr10"
      :
      mode="region"
      :disabled="true"
      :selectData="provinceData"
      :selValue="address.province"
      :width="84"
      placeholder="請選擇省"
      @getValue="getProvinceCode" />
    <Select
      class="mr10"
      :
      mode="region"
      :selectData="cityData"
      :selValue="address.city"
      :width="172"
      placeholder="請選擇市"
      @getValue="getCityCode" />
    <Select
      mode="region"
      :
      :selectData="areaData"
      :selValue="address.area"
      :width="172"
      placeholder="請選擇區(qū)"
      @getValue="getAreaCode" />
  </div>
</template>
<script>
import Select from '@/components/Select'
import { dictByType } from '@/api/index'
export default {
  name: 'Cascader',
  components: {
    Select
  },
  props: {
    selectedAddress: { // 省市區(qū)初始值
      type: Object,
      default: () => {
        return {}
      }
    },
    zIndex: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      provinceData: [
        {
          dictVal: '貴州省',
          dictKey: 'P29'
        }
      ],
      cityData: [],
      areaData: [],
      regionParams: {
        type: '1',
        parentDictKey: ''
      },
      address: {
        province: 'P29',
        city: this.selectedAddress.city || '',
        area: this.selectedAddress.area || ''
      },
      addressName: {
        provinceName: '貴州省',
        cityName: '',
        areaName: ''
      },
      initialCity: true
    }
  },
  created () {
    this.getCity('P29')
    console.log('address:', this.address)
  },
  methods: {
    getCity (key) { // 獲取市數(shù)據(jù)
      this.regionParams.parentDictKey = key
      dictByType(this.regionParams).then(res => {
        console.log('city-res:', res)
        if (res.message.code === 0) {
          if (res.data.dataList) {
            this.cityData = res.data.dataList
            if (this.initialCity && this.address.city) {
              this.initialCity = false
              this.cityData.forEach(item => {
                if (item.dictKey === this.address.city) {
                  this.getArea(item.dictKey)
                }
              })
            }
            console.log('cityData:', this.cityData)
          }
        }
      })
    },
    getArea (key) { // 獲取區(qū)數(shù)據(jù)
      this.regionParams.parentDictKey = key
      dictByType(this.regionParams).then(res => {
        console.log('area-res:', res)
        if (res.message.code === 0) {
          if (res.data.dataList) {
            this.areaData = res.data.dataList
            console.log('areaData:', this.areaData)
          }
        }
      })
    },
    getProvinceCode (name, key) {
      console.log('province:', name, key)
    },
    getCityCode (name, key) {
      console.log('city:', name, key)
      this.address.city = key
      this.addressName.cityName = name
      this.$emit('getAddress', {}, {})
      // 獲取區(qū)下拉列表
      this.getArea(key)
    },
    getAreaCode (name, key) {
      console.log('area:', name, key)
      this.address.area = key
      this.addressName.areaName = name
      this.$emit('getAddress', this.address, this.addressName)
    }
  }
}
</script>
<style lang="less" scoped>
.m-cascader-wrap {
  display: inline-block;
  width: 449px;
  height: 40px;
  line-height: 40px;
}
</style>

②在要使用的頁面引入：

<Cascader
  :selectedAddress="register"
  mode="region"
  :zIndex="997"
  @getAddress="getRegisterAddress" />
import Cascader from '@/components/Cascader'
components: {
    Cascader
},
data () {
  return {
    register: {
      province: this.data.registerProvinceCode,
      city: this.data.registerCityCode,
      area: this.data.registerAreaCode
    } || {},
  }
}
methods: {
  getRegisterAddress (address, addressName) {
    console.log('register-address:', address)
    this.register = address
    if (JSON.stringify(addressName) !== '{}') { // 用于提交表單
      this.addParams.registerProvinceName = addressName.provinceName
      this.addParams.registerCityName = addressName.cityName
      this.addParams.registerAreaName = addressName.areaName
    }
    if (JSON.stringify(address) !== '{}') { // 用于校驗下拉表單是否未選擇
      this.checkFocus('register')
    }
  }
}

關于“Vue如何實現(xiàn)省市區(qū)級聯(lián)下拉選擇框”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。