快捷導(dǎo)航

vue + elementUI實(shí)現(xiàn)省市縣三級聯(lián)動的方法示例

更新時間：2019年10月29日 09:19:26 作者：zxc19890923

這篇文章主要介紹了vue + elementUI實(shí)現(xiàn)省市縣三級聯(lián)動的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

本文介紹了vue + elementUI實(shí)現(xiàn)省市縣三級聯(lián)動的方法示例，分享給大家，具體如下：

1、首先需要準(zhǔn)備省市縣json文件，網(wǎng)上有很多可以下載。項(xiàng)目中使用的city.json數(shù)據(jù)是這樣的格式：

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

2、創(chuàng)建一個組件開始寫代碼

<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="請選擇區(qū)縣">
    <el-option value="" label="請選擇區(qū)縣"></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 {
   // 整個省市縣數(shù)據(jù)
   city: city,
   // 被選中的市數(shù)據(jù)
   cityList: [],
   // 被選中的縣數(shù)據(jù)
   areaList: [],
   selectProvince: {},
   selectCity: {},
   selectArea: {}
  }
 },
 mounted () {
 },
 methods: {
  // 省份 市 縣聯(lián)動
  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>

總結(jié)：整個過程很簡單，就是在選中省的時候獲取他的所有children節(jié)點(diǎn)數(shù)據(jù)（市）在選擇市的時候獲取她的所有children節(jié)點(diǎn)數(shù)據(jù)（區(qū)縣）

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: