iView表单部分域重置

最新推荐文章于 2023-04-22 20:26:08 发布

刘显卓

最新推荐文章于 2023-04-22 20:26:08 发布

阅读量4.2k

点赞数 1

分类专栏： iView 文章标签： iView 表单表单域重置 reset

本文链接：https://blog.csdn.net/xianzhuo_sky/article/details/82468925

版权

2 篇文章 0 订阅

订阅专栏

iView的表单api给出了一个resetFields方法，用于重置整个表单输入的内容并清除验证提示。

可以将需要重置的域所绑定的model变量的值设为空字符串’’，这样会有问题。这种方法只是将输入的内容设为了空字符串，如果这个域带有一个iView的验证限制类型为数字或为必填的情况下，就会触发验证。由于空字符串不是数字或者这个必填的域变为了空，就会验证失败，界面上就会有一个很不友好的提示。
验证提示

查看iView的resetFields方法的源码，这个方法是这样写的，就只有一句话

resetFields:function(){this.fields.forEach(function(e){e.resetField()})}

从这个forEach我们可以联想出整个表单的域是通过循环一个个重置的，每个域通过resetField这个方法进行重置，真正执行重置的是forEach里面的resetField方法。
那么这个fields应该就是所有域的集合了，console.log()一下，果不其然。
可以先看一下整个结构

console.log(this.$refs [name])

也可以直接看域的array

console.log(this.$refs [name].fields)

这是所有域的数组
域数组
展开来看
这是每个域中的属性
域中熟悉
其中prop属性大家肯定都熟悉，通过这个属性我们就可以定位到我们想重置的域了。当然这里面还有很多东西，包括resetField方法，大家可以仔细找找看。

了解清楚域的对象以后，我们就可以自己来写部分重置的方法了！

this.$refs [name].fields.forEach(function (e) {
      if (e.prop == 'abc') {
          e.resetField()
      }
})

如果想重置prop为’abc’的域，这样写就OK啦！

当然我们也可以写一个通用的部分域重置方法，具体实现根据大家的技术水平高低写出来也就有所不同啦。

更新一下，使用resetField重置前先将域所绑定的model变量的值设为空字符串，再使用resetField方法清除验证提示

关注