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

关于"Vue如何实现省市区级联下拉选择框"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。