View UI清除表单

        首先,想要先爆个粗口,这个组件真的好难用,接下来看看清除表单验证吧,和element-ui一点都不一样。

        1、清除所有表单:resetFields()

this.$nextTick(() => {
   this.$refs['dateForm'].resetFields()
})

        其中dateForm为form表单的ref,可以console.log(this.$refs['dateForm']) ,看到里面有resetFields()方法

        2、清除特定元素表单:resetField()

        这个起源于我项目中有一个for循环的表单验证,随着select的切换,后面input的表单验证也需要清除,如果使用上面的resetFields(),会将整个表单重置到初始化状态,所以需要使用resetField()

        可以console.log(this.$refs.dateForm.fields),返回的数据中可以查看prop,prop就是我们vue页面rules:{}中写的表单验证,for循环遍历出我们需要清除的某个表单进行清除即可

/**
* select下拉框发生change的时候清除
* */
clearV() {
   for (const item of this.$refs.dateForm.fields) {
      // 'remark'为表单验证字段,即:下拉框选中发生变化时,清除remark的表单验证
      if (item.prop === 'remark') {
          item.resetField()
          break
      }
   }
},

        反正感觉用起来没有element-ui舒服,可能是element-ui用习惯了吧,如果是element-ui,使用clearValidate()就解决了,但是View我没有找到这个方法。

  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值