ivew表单清空表单的一些技巧

PC项目通常使用iView组件，我通常会把表单Form单独写一个vue文件，然后在父组件里边用iView的Modal将表单弹出，代码如下：
1.Modal引用表单组件

那么有一个问题就是关闭弹框的时候要将表单重置。
重置有两个用处：
其一：将表单的字段清空
其二：表单难免有校验，避免重新打开表单时，错误提示还在

在引用子组件的时候，给子组件添加ref属性，方便使用子组件的方法。
iView的Modal弹框右上角有一个关闭的按钮，在关闭的按钮，我们要将弹框关闭的是就执行清空表单的操作，Modal组件抛出一个事件on-visible-change，modal框显示状态发生变化时触发，返回一个参数，若参数为false为modal框关闭，那这样我们就可以来清空表单了

1
2
3
4
5
close(state){				
  if(!state){
    this.$refs.child.$refs['formModel'].resetFields()
  }
}

resetFields()方法是form表单的方法，直接解决了我们需要重置表单的两个问题，在表单组件中也要给Form组件添加ref属性，因为验证表单项和重置表单使用的都是表单组件自带的方法，如下：
2.表单组件添加ref属性

为什么要写两层refs来获取呢，打印如下：

3.打印refs

并结合chrome的vue插件可以清晰的看到：

4.vue组件关系
所有需要refs两次才能找到表单实例并调用方法。

***那么还有一个问题，若是表单中有上传视频的功能，上传视频的时间比较长，在关闭弹框的时候将停止上传视频，这个问题确实还挺困扰，不能终止请求上传，但是又不能再打开弹框的时候，文件上传成功了，并显示了文件上传列表，所以关闭弹框的时候要清掉已经上传的文件。iview虽然没有提供upload提供终止请求，但是提供了一个清空文件的方法。

既然是调用upload组件中的方法，所以在upload组件上写上ref

1
2
3
4
5
6
7
8
9
10
11
// add-resource.vue中

<Upload ref="uploadViedo" v-if="formModel.rpicture !== ''" :action='actionVideo'  name='multipartFile' :showList='true' type='select' :maxSize='51200'   :disabled="formModel.rpicture == ''" :on-success="uploadVideo" :on-exceeded-size="sizeErroeViedo" :format="['mp4']" :on-format-error="formatErrorViedo">
</Upload>

methods:{
clearFiles(){
  this.$refs.uploadViedo.clearFiles()
}

}

那么在父组件中的close方法添加：

1
2
3
4
5
6
close(state){				
  if(!state){
    this.$refs.child.$refs['formModel'].resetFields()
    this.$refs.child.clearFiles()
  }
}