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

本文实例为大家分享了Vue实现省市区级联下拉选择框的具体代码，供大家参考，具体内容如下

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

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

效果图如下：

 ①创建级联下拉选择Cascader.vue组件

②在要使用的页面引入：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。