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

Editor to share with you how to achieve Vue+ElementUI-based provincial and urban address selection general components, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. Reason

In the process of project development, there is a requirement for the function of provincial, municipal and regional address selection. At first, we want to directly use the static address resource library to pack locally, but this way is not convenient to maintain, so give up. Later, I want to directly let the background return all the address data, and then use the cascade selector to select, but found that the data transmission is a bit large and the processing process is time-consuming, so I abandoned this method. Finally, it is decided to select the address of provinces, cities and regions asynchronously, that is, first query the province list, then query the city list according to the selected province code, and finally obtain the district / county list according to the selected city list. Finally, according to the different application scenarios, two implementation schemes are given.

The backend needs to provide a total of four APIs, one for querying all provinces, one for querying all cities based on provincial code, one for querying all districts / counties based on city code, and one for converting to three code values of provinces and cities based on address code.

/ / the four APIs used in my project `${this.API.province} / ${countryCode}` / / query the list of provinces according to the national code, China is fixed at 156, You can expand `$ {this.API.city} / ${provinceCode} `/ / query the city list according to the provincial code `$ {this.API.area} / ${cityCode}` / / convert the city code query district / county list `${this.API.addressCode} / ${addressCode}` / address code to provincial, municipal and regional code.

Second, the implementation scheme of single selection box based on el-cascader cascade selector.

Export default {name: 'addressSelector', props: {areaCode: null}, model: {prop:' areaCode', event: 'cityChange'}, data () {return {/ / provincial and municipal city: {obj: {}, options: []}, props: {/ / cascade selector attribute configuration value:' value', children: 'cities', checkStrictly: true} CityValue: [], / / City Code}}, computed: {}, created () {this._initData ()}, mounted () {}, methods: {_ initData () {this.$http ({method: 'get') Url: this.API.province +'/ 156' / / China}) .then (res = > {this.city.options = res.data.body.map (item = > {/ / return {value: item.provinceCode, label: item.provinceName, cities: []}})})} GetCodeByAreaCode (code) {if (code = = undefined) return false this.$http ({method: 'get', url: this.API.addressCode +' /'+ code}). Then (res = > {if (res.data.code = this.API.SUCCESS) {let provinceCode = res.data.body.provinceCode let cityCode = res.data.body.cityCode let areaCode = res.data.body.areaCode this.cityValue = [provinceCode, cityCode AreaCode] this.handleItemChange ([provinceCode, cityCode])}) .finally (res = > {})}, handleItemChange (value) {let a = (item) = > {this.$http ({method: 'get', url: this.API.city +' /'+ value [0],}) .then (res = > {item.cities = res.data.body.map (ite = > {return {value: ite.cityCode) Label: ite.cityName, cities: []}}) if (value.length===2) {/ / if the incoming value.length===2 & & executes a () first It means that areaCode is passed in. Need to initialize the checkbox b (item)}} .finally (_ = > {})} let b = (item) = > {if (value.length = 2) {item.cities.find (ite = > {if (ite.value = value [1]) {if (! ite.cities.length) {this.$http ({method: 'get') Url: this.API.area +'/'+ value [1]}) .then (res = > {ite.cities = res.data.body.map (ite = > {return {value: ite.areaCode, label: ite.areaName) }})}. Finally (_ = > {})}} this.city.options.find (item = > {if (item.value = value [0]) {if (item.cities.length) {b (item)} else {a (item)} return true}})})} GetCityCode () {return this.cityValue [2]}, reset () {this.cityValue = []}, cityChange (value) {if (value.length = 3) {this.$emit ('cityChange', value [2])} else {this.$emit (' cityChange', null)}, watch: {areaCode: {deep: true, immediate: true Handler (newVal) {if (newVal) {this.getCodeByAreaCode (newVal)} else {this.$nextTick (()) = > {this.reset ()}

The final effect is as follows (motion picture):

Screenshot:

Third, the implementation of multi-selection box based on el-select selector.

Lt Template > export default {name: 'addressHorizontalSelect', components: {}, props: {hideCity: {/ / Hidden City type: Boolean, default: false}, hideArea: {/ / Hidden area / County type: Boolean, default: false}, addressCode: null / / address Code} Model: {prop: 'addressCode', event:' addressSelect'}, data () {return {provinceList: [], / / province list cityList: [], / / city list areaList: [], / / district / county list provinceCode:', / / province code cityCode:'', / / city code areaCode:'', / / district / county code cityFlag: false / / Flag to avoid repeated requests provinceFlag: false, areaFlag: false}}, computed: {span () {if (this.hideCity) {return 24} if (this.hideArea) {return 12} return 8}}, watch: {}, created () {this.getProvinces ()} Methods: {/ * get data * @ param {Array} array list * @ param {String} url request url * @ param {String} code Encoding (one level Encoding) * / fetchData (array, url, code) {this.$http ({method: 'get' Url: url +'/'+ code}) .then (res = > {if (res.data.code = this.API.SUCCESS) {let body = res.data.body | | [] array.splice (0, array.length,... body)}}) .catch (err = > {console.log (err)}) .finally (res = > {})} / / obtain the list of provinces according to the country code getProvinces () {if (this.provinceFlag) {return} this.fetchData (this.provinceList, this.API.province, 156) this.provinceFlag = true}, / / modify the provinces Pull the corresponding city list changeProvince (val) {this.fetchData (this.cityList, this.API.city, this.provinceCode) this.cityFlag = true this.cityCode =''this.areaCode =' 'this.$emit (' addressSelect', val)}, / / obtain the city list getCities () {if (this.cityFlag) {return} if (this.provinceCode) {this.fetchData (this.cityList, this.API.city) according to the province code This.provinceCode) this.cityFlag = true}}, / / City Modification Pull the corresponding region list changeCity (val) {this.fetchData (this.areaList, this.API.area, this.cityCode) this.areaFlag = true this.areaCode =''this.$emit (' addressSelect', val)}, / / obtain the region list getAreas () {if (this.areaFlag) {return} if (this.cityCode) {this.fetchData (this.areaList, this.API.area, this.cityCode)}} according to the city code / / modify changeArea (val) {this.$emit ('addressSelect', val)}, / / reset the provincial, municipal / county code reset () {this.provinceCode ='', this.cityCode ='', this.areaCode =''}, / / convert the address code into a list of provinces, cities and regions addressCodeToList (addressCode) {if (! addressCode) return false this.$http ({method: 'get') Url: this.API.addressCode +'/'+ addressCode}) .then (res = > {let data = res.data.body if (! data) return if (data.provinceCode) {this.provinceCode = data.provinceCode this.fetchData (this.cityList, this.API.city, this.provinceCode)} else if (data.cityCode) {this.cityCode = data.cityCode this.fetchData (this.areaList, this.API.area) This.cityCode)} else if (data.areaCode) {this.areaCode = data.areaCode}) .finally (res = > {})}, watch: {addressCode: {deep: true, immediate: true, handler (newVal) {if (newVal) {this.addressCodeToList (newVal)} else {this.$nextTick () = > {this.reset ()}

The implementation effect is as follows (motion picture):

The above is all the contents of the article "how to realize the general component of provincial and urban address selection based on Vue+ElementUI". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.