View UI清除表单

笑到世界都狼狈2024-03-13 15:15

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

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

javascript 复制代码

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循环遍历出我们需要清除的某个表单进行清除即可

javascript 复制代码

/**
* 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我没有找到这个方法。