Element-UI 省市區（縣）三級聯動

由於公司移動端使用的是Vux的UI框架，該框架有x-address元件，其中包含了省市縣的資料，通過Element-UI實現與其相同的省市區（縣）三級聯動。

Vux中x-address對全國省市區的資料進行了封裝，引入不同版本的JSON檔案展示不同的內容，這裡我引入的是V4版本（最新版本）的JSON資料，JSON格式如下圖：

思路：在此我列舉了省市縣的資料，相關資料下載，很明顯省市區有各自的特性

1. 省的value是0000結尾；

2. 市的value是00結尾；同時又parent欄位對應相應的省；

3. 區（縣）parent欄位對應的相應的市

直接上乾貨，相應的程式碼如下展示

HTML

<template>
  <div>
    <el-select v-model="valueProvince"
               placeholder="請選擇省"
               @change="changeProvince">
      <el-option
        v-for="item in provinceList"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="valueCity"
               placeholder="請選擇市"
               @change="changeCity">
      <el-option
        v-for="item in cityOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="valueOrigin"
               placeholder="請選擇區"
               @change="changeOrigin">
      <el-option
        v-for="item in originOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>
 

JS

import axios from 'axios'
export default {
  name: 'HelloWorld',
  data () {
    return {
      provinceList: [], // 省列表
      cityList: [], // 市列表
      originList: [], // 區列表
      valueProvince: '', // 所選的省
      valueCity: '', // 所選的市
      valueOrigin: '', // 所選的區
      cityOptions: [], // 市下拉框資料
      originOptions: [] // 區下拉框資料
    }
  },
  methods: {
    // 選擇省
    changeProvince(val) {
      this.provinceList.forEach((province, index) => {
        if (val.toString() === this.provinceList[index].value) {
          this.cityOptions = this.provinceList[index].children
          this.valueCity = this.provinceList[index].children[0].value
          this.originOptions = this.provinceList[index].children[0].children
          this.valueOrigin = this.provinceList[index].children[0].children[0].value
        }
      })
    },
    // 選擇市
    changeCity(val) {
      this.cityList.forEach((city, index) => {
        if (val.toString() === this.cityList[index].value) {
          this.originOptions = this.cityList[index].children
          this.valueOrigin = this.cityList[index].children[0].value
        }
      })
    },
    // 選擇區
    changeOrigin(val) {
      this.valueOrigin = val
    },
    _getJsonData() {
      axios.get('../../static/china_address_v4.json').then((res) => {
        this.provinceList = []
        this.cityList = []
        this.originList = []
        res.data.forEach((item) => {
          if (item.value.match(/0000$/)) {
            this.provinceList.push({
              value: item.value,
              label: item.name,
              children: []
            })
          } else if (item.value.match(/00$/)) {
            this.cityList.push({
              value: item.value,
              label: item.name,
              children: []
            })
          } else {
            this.originList.push({
              value: item.value,
              label: item.name
            })
          }
        })
        for (let index in this.provinceList) {
          for (let index1 in this.cityList) {
            if (this.provinceList[index].value.slice(0, 2) === this.cityList[index1].value.slice(0, 2)) {
              this.provinceList[index].children.push(this.cityList[index1])
            }
          }
        }
        for(let item1 in this.cityList) {
          for(let item2 in this.originList) {
            if (this.originList[item2].value.slice(0, 4) === this.cityList[item1].value.slice(0, 4)) {
              this.cityList[item1].children.push(this.originList[item2])
            }
          }
        }
      })
    }
  },
  created() {
    this._getJsonData()
  }
}
 

這裡我使用axios讀取json檔案，基於我之前的思路，遍歷資料並正則匹配相應的資料（4個0對應省，2個0對應市，其他為區），新增至相應的陣列中。

注意

1. 靜態檔案儲存路徑，小心404報錯。
2. 資料型別沒有對應上。由於Element-UI的el-select元件中有change事件，預設引數是value，它的型別是Number；而解析json檔案出來的資料型別是String。