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>

效果图:

使用中如有什么问题,请添加下方公众号进行提问: