Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to achieve the provincial and municipal district concatenation drop-down selection box in Vue. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

The details are as follows

Based on (Vue drop-down selection box Select component II), the provincial, municipal and district cascade drop-down selection box components are realized.

(for business needs, Guizhou is selected as the fixed province. Without this service, no disabled attribute can be passed.)

The effect picture is as follows:

① create cascading drop-down select Cascader.vue component

Import Select from'@ / components/Select'import {dictByType} from'@ / api/index'export default {name: 'Cascader', components: {Select}, props: {selectedAddress: {/ / initial values of provinces, cities and regions type: Object, default: () = > {return {}}, zIndex: {type: Number, default: 1}} Data () {return {provinceData: [{dictVal: 'Guizhou Province', dictKey: 'P29'}], cityData: [], areaData: [], regionParams: {type:' 1province, parentDictKey:'}, address: {province: 'P29' City: this.selectedAddress.city | |', area: this.selectedAddress.area | |''}, addressName: {provinceName: 'Guizhou Province', cityName:', areaName:'}, initialCity: true}}, created () {this.getCity ('P29') console.log (' address:', this.address)} Methods: {getCity (key) {/ / get city data 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) {/ / fetch zone data 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', {}, {}) / / get zone drop-down list 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)}} .m-cascader-wrap {display: inline-block Width: 449px; height: 40px; line-height: 40px;}

② introduces on the page to be used:

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)! ='{}') {/ / to submit the form this.addParams.registerProvinceName = addressName.provinceName this.addParams.registerCityName = addressName.cityName this.addParams.registerAreaName = addressName.areaName} if (JSON.stringify (address)! ='{}') {/ / to verify whether this.checkFocus is not selected in the drop-down form (' Register')} this is the end of the article on "how Vue implements the provincial and municipal cascading drop-down selection box". Hope that the above content can be helpful to you, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.