最近用vant ui框架开发小程序,在使用cascader级联选择器的时候,遇到这样一个问题,vant并未提供cascader的重置方法,手动将数据清空之后,样式并未重置,选择项还是停留在选择的子级上面,如下图。
解决办法,用v-if重置选择器的存在。
1、在cascader添加 v-if="showCascader"
2、点击重置按钮的时候
this.$nextTick(()=>{
this.selectComponent('#seekDropdown4').toggle(false);
this.showCascader=false
})
关闭菜单栏弹窗,然后设置showCascader为false,销毁cascader
3、在打开弹窗时,设置showCascader为true
openDropdown(i){
if(i === 4){
this.$nextTick(()=>{
this.showCascader=true
})
}
},
这样就可以解决它的数据重置,但是样式不重置的问题了。