現在大部分電商的網站、app都需要使用者或者管理者去選擇設定地區等位置資訊。下面我就介紹一下前端開發者用vue，axios，element-ui開發一個省市區三級聯動的元件。

1.準備工作，首先我們需要全中國的省市區資源的json資料（科普一下：前六位數字是身份證前六位）

2.搭建vue-cli,安裝axios,element-ui,建立vue，webpack專案

    1).

    在控制檯或者終端執行以下程式碼，其中只需要路由（y），其他e2e，eslint這些不需要(y)

    vue init webpack threelink

    cd threelink

    npm run dev

    把沒用的元件刪除，重新建立元件

  npm install axios --save ,安裝axios

    npm i element-ui -S(這是縮寫) , 安裝element-ui

    2).

    在專案threelink->src->main.js裡面新增，呼叫element-ui外掛得程式碼

// 載入element_ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

    3).在static下建立json資料夾，資料夾裡面放map.json,就是全國地址的資料資訊，目錄結構如下

3.基本步驟都已經ok,下面我們開始寫前端介面程式碼.

    上element-ui官網，找到選擇器select，這裡我們就不多說了，瘋狂地複製貼上，寫css樣式就行了。貼上完修改完之後的樣子就是這個樣子了，

彆著急，一會開始上程式碼！

4.

首先我們要知道，當我們選擇之後資料才會變化的，所以要給select繫結change事件。

我們仔細閱讀了element-ui的select文件之後發現，v-model的值為當前被選中的el-option的 value 屬性值。

5.template元件裡面的程式碼！！！

<div class="linkage">
    <el-select
      v-model="sheng"
 

      @change="choseProvince"//這個change事件是select的，不是option的，別寫在option裡面
      placeholder="省級地區">
      <el-option
        v-for="item in province"
        :key="item.id"
        :label="item.value"
        :value="item.id">
      </el-option>
    </el-select>
    <el-select
      v-model="shi"
      @change="choseCity"
      placeholder="市級地區">
      <el-option
        v-for="item in shi1"
        :key="item.id"
        :label="item.value"
        :value="item.id">
      </el-option>
    </el-select>
    <el-select
      v-model="qu"
      @change="choseBlock"
      placeholder="區級地區">
      <el-option
        v-for="item in qu1"
        :key="item.id"
        :label="item.value"
        :value="item.id">
      </el-option>
    </el-select>
  </div>v-model="sheng"
      @change="choseProvince"//這個change事件是select的，不是option的，別寫在option裡面
      placeholder="省級地區">
      <el-option
        v-for="item in province"
        :key="item.id"
        :label="item.value"
        :value="item.id">
      </el-option>
    </el-select>
    <el-select
      v-model="shi"
      @change="choseCity"
      placeholder="市級地區">
      <el-option
        v-for="item in shi1"
        :key="item.id"
        :label="item.value"
        :value="item.id">
      </el-option>
    </el-select>
    <el-select
      v-model="qu"
      @change="choseBlock"
      placeholder="區級地區">
      <el-option
        v-for="item in qu1"
        :key="item.id"
        :label="item.value"
        :value="item.id">
      </el-option>
    </el-select>
  </div>

6.script標籤裡面的程式碼！！

    這裡主要的難點就是，找到json資料的特點！

    像直轄市這些沒有市區的，預設省份=市區，例如：省份：天津。城市：天津。區縣:。。/

    我們可以找到資料之間的規律自己手動增加資料資訊，如果要返回給後端，那麼就拿出來他的前面的位置引數，或者是後面的未知引數！！

例如：

按正常來講，是沒有紅色圈出來的那個引數的，這是我按照正確的規律手動後新增的!!!為了滿足直轄市而新增

一定要記得手動新增的資料是無效的！！這個只是為了自己編碼方便才新增的！手動新增的那條資料，不要返給後端，要找到它前面的資料，找到真實資料！

import axios from 'axios'
export default {
  data () {
    return {
      mapJson:'../static/json/map.json',
      province:'',
      sheng: '',
      shi: '',
      shi1: [],
      qu: '',
      qu1: [],
      city:'',
      block:'',
    }
  },
  methods:{
    // 載入china地點資料，三級
      getCityData:function(){
        var that = this
        axios.get(this.mapJson).then(function(response){
          if (response.status==200) {
            var data = response.data
            that.province = []
            that.city = []
            that.block = []
            // 省市區資料分類
            for (var item in data) {
              if (item.match(/0000$/)) {//省
                that.province.push({id: item, value: data[item], children: []})
              } else if (item.match(/00$/)) {//市
                that.city.push({id: item, value: data[item], children: []})
              } else {//區
                that.block.push({id: item, value: data[item]})
              }
            }
            // 分類市級
            for (var index in that.province) {
              for (var index1 in that.city) {
                if (that.province[index].id.slice(0, 2) === that.city[index1].id.slice(0, 2)) {
                  that.province[index].children.push(that.city[index1])
                }
              }
            }
            // 分類區級
            for(var item1 in that.city) {
              for(var item2 in that.block) {
                if (that.block[item2].id.slice(0, 4) === that.city[item1].id.slice(0, 4)) {
                  that.city[item1].children.push(that.block[item2])
                }
              }
            }
          }
          else{
            console.log(response.status)
          }
        }).catch(function(error){console.log(typeof+ error)})
      },
      // 選省
      choseProvince:function(e) {
        for (var index2 in this.province) {
          if (e === this.province[index2].id) {
            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
          }
        }
      },
      // 選市
      choseCity:function(e) {
        for (var index3 in this.city) {
          if (e === this.city[index3].id) {
            this.qu1 = this.city[index3].children
            this.qu = this.city[index3].children[0].value
            this.E = this.qu1[0].id
            // console.log(this.E)
          }
        }
      },
      // 選區
      choseBlock:function(e) {
        this.E=e;
        // console.log(this.E)
      },
    },
    created:function(){
      this.getCityData()
    }
}

7.效果圖

8.OK我個人感覺效果還不錯，也不卡

github專案地址：https://github.com/LLJJTT/threelink  需要的話可自行下載哦！！1

這是我的微信公眾號：

不定期更新前端知識