版权声明:https://blog.csdn.net/xianzhuo_sky https://blog.csdn.net/xianzhuo_sky/article/details/82468925
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方法清除验证提示