Vant Cascader 省市县三级联动

1、引用

import Vue from "vue";

import { Cascader} from "vant";

Vue.use(Cascader);

2、添加

<van-cascader

        v-model="cascaderValue"

        title="选择省市县"

        :options="addressDataArr"

        @close="show = false"

        @change="onChange"

        @finish="onFinish"

      />

3、关联data

data () {

    return {

        cascaderValue: "",//选择的数据

        addressDataArr:[],//保存省市县数据

        show:false,

        provinceIndex:-1,//选择省的次序

         cityIndex:-1,//选择城市的次序

    }

}

4、请求省数据

this.getAddress("")

保存数据

因为组件使用text和value展示，所以获取的接口数据需要手动再存一下，element.name是名称，element.code是城市编码

方法实现

重新选择省或市要重置之前选择的次序，确保在网络请求时数据能放入正确位置

onFinish后，选择项的value会存在v-model的cascaderValue中，这里我存的是区县的编码，可以直接传给后台

调试过程曾出现过放入childern数据后，组件刷新，数据不展示或一闪而过的情况，差点就砸电脑了，百度一圈不知道什么情况，一般这种情况多半是粗心落下什么东西了。。。仔细检查一遍发现是因为忘了写v-model。。。。v-model很重要，一定要写