一、需求:使用vant的级联选择器时,当选择的前一列无children时,自动清空后面几列的值。
这需要我们绑定一个change事件,关于change事件的参数,可以看官方文档的介绍
然后,拿到对应列对应的索引后,判断该列的数据是否有children属性,没有的话就通过picker实例的setColumnValues方法将后面列的值清空。
二、问题:当清空了级联选择器后面几列的值后,再点击确认会出现text的报错。
三、解决问题:
对于这个问题我也不是很清楚,我的想法是在级联选择器确认提交的时候,每一列是必须要有text存在的,但我的需求又需要将他们清空,这就有点矛盾了。然后就换了一个思路,不要直接将后面的数据直接变为空数组,而是将后面的数组数据的text字段赋为空字符串。
else if (index == 3) {
this.deepName(this.columns,values[3])
console.log("checked",this.checked.children || []);
picker.setColumnValues(index + 1,this.checked.children || [{text:''}])
this.form.riverName = ''
for(let i = 0;i<=index;i++){
this.form.riverName = this.form.riverName+values[i]
}
this.deepRiverCode(this.columns,values[index])
console.log("code",this.form.riverCode );
}
测试之后,问题解决。不过我感觉这并不是一个好的解决办法,或许有更方便的方法来实现这个需求。