Vant级联选择器值某列值为空时报错text问题

本文介绍了在使用Vant级联选择器时,如何在无子选项时清空后续列的值,并解决清空后点击确认出现的错误。作者通过在change事件中检查children属性并使用setColumnValues方法清空值,然后在确认时用空字符串代替空数组,成功解决了报错问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、需求:使用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 );

      }

测试之后,问题解决。不过我感觉这并不是一个好的解决办法,或许有更方便的方法来实现这个需求。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值