Detailed Vue, Element-UI, AXIOS to achieve three levels of provincial and urban area

Now most e-commerce websites, app require user or managers to select location information such as the region. Let me introduce the front-end developers to develop components of the provincial and urban three-level linkage with Vue, AXIOS, Element-UI.

1. Preparation, first we need JSON data in the provincial and urban resources of China (Popular: The former six digits is the first six digits of ID card)

2. Build Vue- CLI, install AXIOS, ELEMENT-UI, create Vue, WebPack project


Perform the following code in the console or terminal, where only route (Y), other E2E, ESLINT These do not need (Y)

Vue Init Webpack Threeelink

CD Threeelink


delete the useless components, recreate components

NPM Install Axios – Save, Installing AXIOS

NPM I Element-Ui -s (this is abbreviation), installing Element-Ui


In the project threeelink-> src-> main.js, the ELEMENT-UI plug-in code

// load Element_uiimport Elementui from ‘Element- UI’Import ‘Element-Ui / lib / theme-chalk / index.css’vue.use (elementui)
  3). Create a JSON folder under Static, The folder is placed in Map.json, which is the data information of the national address, the directory structure is as follows  

3. Basic steps have been OK, below we start writing front-end interface code.


Upset-UI official website, find the selector SELECT, here we don’t have much to say, crazy copy paste, write CSS style. After the adhesive is modified, this is like this,


Don’t worry, start the code for a while!

4. First we have to know that when we choose, the data will change, so you have to bind the Change event to the SELECT.

We carefully read the Element-UI SELECT documentation found that V-model’s value is the value attribute value of the currently selected EL-Option. 详解Vue、element-ui、axios实现省市区三级联动

5. The code in the template component! ! !

The code inside the script tag! ! The main difficulty here is to find the characteristics of JSON data! There is no urban area, default provinces in municipalities, default provinces = urban, for example: province: Tianjin. City: Tianjin. District County:. . / We can find the rules between the data yourself to add data information. If you want to return to the backend, then take out his front position parameters, or the unknown parameters behind! !
According to normal, it is the parameter without the red circle. This is the correct rules. Add !!! Add
Be sure to manually add data is invalid! ! This is just to be added to your own coding! That data is manually added, don’t return to the backend, find the data in front, find real data!

Import Axios from ‘Axios’Export Default {data () {return {mapjson:’ ../ static / json / map.json ‘, province:’ ‘, Sheng: ”, Shi: ‘, Shi1: [], Qu:’, QU1: [], City: ‘, block:’ ‘,}}, methods: {// Loading CHINA location data, Level 3 GetcityData: function () {var there = this axio gt (this.mapjson) .then (response.status == 200) {var data = this.province = [] That. City = [] this.block = [] // provincial urban data classification for (var Item in data) {if (item.match (/ 0000 $ /)) {// 省 省 That.province.push ({ID: Item, Value: Data [Item], Children: []})} Else IF (item.match (/ 00 $ /)) {// City ({ID: Item, Value: Data [Item], Children: []})} else {// Area That.block.push ({ID: Item, Value: Data [item]})}} // Classification Municipal for (Var Index In That.Province) {if (Var Index1 In {if (That.Province [index] .id.slice (0, 2) === [index1] .id . Slice (0, 2)) {That.Province [index] .children.push ( [index1])}}} // Classification Area for (Var item1 in {for (VAR ITEM2 IN That.block) {if (this.block [item2] .id.slice (0, 4) === [item1] .id.slice (0, 4)) { [item1] .children .push (this.block [item2])}}}} else {console.log (response.status)}})})})})})})})}). Catch (Error) {Console.log (TypeOf + Error)}}}, //Select ChoseProvince: Function (E) {for (Var index2 in this.province) {if (e === this.province [index2] .id) {console.log (this.Province [index2] .id) // Your selection provincial coded console.log (this.Province [index2] .value) // provincial code corresponding to the Chinese character this.shi1 = this.Province [index2] .children this.shi = this.province [index2]. Children [0] .Value this.qu1 = this.province [index2] .children [0] .children this.qu = this.province [index2] .children [0] .children [0] .value this.e = this .qu1 [0] .id}}}, // sale chosecity: function (e) {for (var index3 in {if (e === [index3] .id) {this. QU1 = [index3] .children this.qu = [index3] .children [0] .Value this.e = this.qu1 [0] .id // console.log (this.e)} }},// selection choseblock: function (e) {this.e = e; // console.log (this.e)},}, created: function () {this.getcityData ()}

详解Vue、element-ui、axios实现省市区三级联动 8. OK I personally feel good, no card

GitHub Project Address:

The above is the Vue, Element-Ui, AXIOS, which is introduced to you, Element-Ui, AXIOS to realize the provincial and urban three-level linkage Detailed explanation, I hope to help everyone. If you have any questions, please leave a message, Xiaobian will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment