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

This article mainly introduces "how to use vue to realize the cascade selection of provinces, cities and regions". In the daily operation, I believe that many people have doubts about how to use vue to realize the cascade selection of provinces, cities and autonomous regions. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for everyone to answer the doubts of "how to use vue to realize the cascade selection of provinces, cities and regions". Next, please follow the editor to study!

First, the effect picture

The effect of the PC end:

The effect image of the mobile end:

Second, implementation logic

My implementation logic here is first through the province to get the city, and then through the city to get the district and county, the street is not fixed, so let the user enter it. The logic of obtaining the corresponding urban area is: each province, city, district and county has a unique code, and then the first two bits of the provincial code are the same as the city, and the city is screened out by interception, and then the first four codes of the city are the same as those of the district and county, and the district and county can be screened out by interception.

Because I use the select component of the element-ui framework on the PC side, the data structure of provinces and municipalities is as follows:

The mobile end is implemented using the van-picker component of the vant framework, and the data structure is different from that on the PC side, so the data structure of provinces, cities and regions is as follows:

III. Related codes

The code of this piece is basically the same, but the difference is that the onchange event on the mobile side can directly get the unique number, and it does not need to be cut like the PC side. You can modify this piece according to your own needs.

Var app = new Vue ({el:'# app', data: {addressForm: {province:', city:', county:', street:'}, / / the data of provinces, cities and regions is placed in another file Here is the provinceList: areaList.provinceList, cityList: [], countyList: []}, methods: {/ / province bindProvinceChange (vals) {/ / get the province's unique number console.log ('data= >') directly from another file. Vals) let arr = vals.split ('|') this.addressForm.province = arr [1] this.addressForm.city ='' This.addressForm.county =''; this.addressForm.street =''; / / get the corresponding city this.cityList = this.addrInit (2, areaList.cityList, arr [0]);}, / / City bindCityChange (vals) {console.log ('vals- >', vals) this.addressForm.county ='' This.addressForm.street ='; let arr = vals.split ('|') this.addressForm.city = arr [1] / / get the corresponding district and county this.countyList = this.addrInit (4, areaList.countyList, arr [0]) }, / / District bindCountyChange (vals) {console.log ('vals-= >', vals) this.addressForm.street ='' Let arr = vals.split ('|') this.addressForm.county = arr [1]}, / / convert an object to an array transArray (obj) {let arr = []; for (let i in obj) {arr.push (obj [I]);} return arr }, / * Encapsulation method-obtain the number of digits intercepted by the corresponding provinces, cities and regions * @ param {number} num * @ param {*} list array * @ param {*} str intercept string * @ returns * / addrInit (num, list) Str) {let strSub = str.substr (0, num) Let arr = this.transArray (list); let newArr = arr.filter (function (val, index, arr) {let newStr = val.value.substr (0, num); return newStr = = strSub;}); return newArr },}}) at this point, the study on "how to use vue to realize the cascade selection of provinces and municipalities" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.