Vue如何实现省市区级联下拉选择框

这篇文章将为大家详细讲解有关Vue如何实现省市区级联下拉选择框，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

具体内容如下

以（Vue下拉选择框Select组件二）为基础实现省市区级联下拉选择框组件

（业务需要，固定省份选择为贵州，没有此业务，不传disabled属性即可）

效果图如下：

 ①创建级联下拉选择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="请选择区"
      @getValue="getAreaCode" />
  </div>
</template>
<script>
import Select from '@/components/Select'
import { dictByType } from '@/api/index'
export default {
  name: 'Cascader',
  components: {
    Select
  },
  props: {
    selectedAddress: { // 省市区初始值
      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) { // 获取市数据
      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) { // 获取区数据
      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', {}, {})
      // 获取区下拉列表
      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如何实现省市区级联下拉选择框”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。