vue如何實現省市區聯動

我們在日常編碼中經常會遇到省市區聯動的需求,下面我就加大家怎麼簡單實現省市區的聯動.
這裏vue用的是vant的組件庫
下面是代碼演示:

<template>
<div class="current-area">
        <div class="sub-title">所在地區：</div>
        <van-cell-group>
          <van-field
            :disabled="tyeOfAreaDisabled?true:false"
            v-model="carmodel"
            placeholder="請選擇"
            @click="show = true"
            disabled="disabled" />
          <van-popup v-model="show" position="bottom">
            <van-area
              ref="area"
              value="110000"
              :area-list="areaList"
              @change="onChange"
              @confirm="show = false"
              @cancel="show = false"
            />
          </van-popup>
      </van-cell-group>
      </template>
      <script>
    <!--vant按需引入-->
    import { Cell, CellGroup, Popup, Field,  Area, Picker } from 'vant'
    export default {
        components: {
            VanCell: Cell,
            VanCellGroup: CellGroup,
            VanPopup: Popup,
            VanField: Field,
            VanArea: Area,
            VanPicker: Picker
        },
        data () {
            return {
                show: false,
                carmodel: '',
                <!--假數據-->
                areaList: {
                    province_list: {
                      110000: '北京市',
                      120000: '天津市'
                    },
                    city_list: {
                      110100: '北京市',
                      110200: '縣',
                      120100: '天津市',
                      120200: '縣'
                    },
                    county_list: {
                      110101: '東城區',
                      110102: '西城區',
                      110105: '朝陽區',
                      110106: '豐臺區',
                      120101: '和平區',
                      120102: '河東區',
                      120103: '河西區',
                      120104: '南開區',
                      120105: '河北區'
                    }
                }
            },
            methods: {
                onChange (picker, value, index) {
             
                  console.log('當前值：' + value + '當前索引：' + index)
                  <!--因爲解析過來的數據是數組而carmodel定義字符串-->
                  let areaName = ''
                  for (var i = 0; i < value.length; i++) {
                    areaName = areaName + value[i].name + ' '
                  }
                  this.carmodel = areaName
                }
            }
        }
    }
</script>

效果圖:

使用中如有什麼問題,請添加下方公衆號進行提問: