vue + elementUI 省市縣三級聯動

一、首先須要準備省市縣json文件，網上有不少能夠下載。項目中使用的city.json數據是這樣的格式：

[
  {
    "value": "110000",
    "label": "北京市",
    "children": [
      {
        "value": "110000",
        "label": "北京市",
        "children": [
          {
            "value": "110101",
            "label": "東城區"
          },
          {
            "value": "110102",
            "label": "西城區"
          },
          {
            "value": "110105",
            "label": "朝陽區"
          },
          {
            "value": "110106",
            "label": "豐臺區"
          },
          {
            "value": "110107",
            "label": "石景山區"
          },
          {
            "value": "110108",
            "label": "海淀區"
          },
          {
            "value": "110109",
            "label": "門頭溝區"
          },
          {
            "value": "110111",
            "label": "房山區"
          },
          {
            "value": "110112",
            "label": "通州區"
          },
          {
            "value": "110113",
            "label": "順義區"
          },
          {
            "value": "110114",
            "label": "昌平區"
          },
          {
            "value": "110115",
            "label": "大興區"
          },
          {
            "value": "110116",
            "label": "懷柔區"
          },
          {
            "value": "110117",
            "label": "平谷區"
          },
          {
            "value": "110118",
            "label": "密雲區"
          },
          {
            "value": "110119",
            "label": "延慶區"
          }
        ]
      }
    ]
  },
  {
    "value": "120000",
    "label": "天津市",
    "children": [
      {
        "value": "120000",
        "label": "天津市",
        "children": [
          {
            "value": "120101",
            "label": "和平區"
          },
          ......

二、建立一個組件開始寫代碼

<template>
  <div class="linkage">
    <div>
      <el-select v-model="selectProvince" filterable size="small" @change="selectProvinceFun($event)" placeholder="請選擇省份">
        <el-option value="" label="請選擇省份"></el-option>
        <el-option :value="item" :label="item.label" v-for="(item, index) in city" :key="index"></el-option>
      </el-select>
    </div>
    <div>
      <el-select v-model="selectCity" filterable size="small" @change="selectCityFun($event)" placeholder="請選擇城市">
        <el-option value="" label="請選擇城市"></el-option>
        <el-option :value="item" :label="item.label" v-for="(item, index) in cityList" :key="index"></el-option>
      </el-select>
    </div>
    <div>
      <el-select v-model="selectArea" filterable size="small" @change="selectAreaFun($event)" placeholder="請選擇區縣">
        <el-option value="" label="請選擇區縣"></el-option>
        <el-option :value="item" :label="item.label" v-for="(item, index) in areaList" :key="index"></el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
import city from '@/assets/json/city.json'
export default {
  name: 'linkage',
  data () {
    return {
      // 整個省市縣數據
      city: city,
      // 被選中的市數據
      cityList: [],
      // 被選中的縣數據
      areaList: [],
      selectProvince: {},
      selectCity: {},
      selectArea: {}
    }
  },
  mounted () {
  },
  methods: {
    // 省份 市 縣聯動
    selectProvinceFun (event) {
      console.log(event)
      if (event) {
        this.cityList = event.children
      } else {
        this.cityList = []
      }
      this.areaList = []
      this.$emit('getLawyerListInfo', [event.label, 'province'])
    },
    selectCityFun (event) {
      console.log(event)
      if (event) {
        this.areaList = event.children
      } else {
        this.areaList = []
      }
      this.$emit('getLawyerListInfo', [event.label, 'city'])
    },
    selectAreaFun (event) {
      console.log(event)
      this.$emit('getLawyerListInfo', [event.label, 'area'])
    }
  }
}
</script>
<style lang="scss" scoped>
  .linkage {
    display: flex;
    div {
      margin-right: 5px;
    }
  }
</style>

總結：整個過程很簡單，就是在選中省的時候獲取他的全部children節點數據（市）在選擇市的時候獲取她的全部children節點數據（區縣）