Vant Cascader 省市县三级联动

Posted 2023-03-22

参考技术A 1、引用

2、添加

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很重要，一定要写