问题发现：

我在前端开发时，用的是elementui组件，在输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据这些地方我选择的是Form表单，因为它有自己的一个校验规则，当我需要提交清空的时候，直接清空表单就可以，所以很方便，但是除了上面的几个方式，比如我下面要说的el-upload（上传文件），el-tabs（标签页和标签）就没发实现，但是通过尝试和查找资料最后我找到了解决办法，下面就和大家分享一下。

解决问题：

el-input及el-tabs

这是目前前端页面想要实现的效果

element ui 右键删除 elementui输入框清除_赋值


但是我在提交表单时，提交成功后想要清空表单内容，它却无法实现

最终通过查找资料发现，你在调用接口，然后让参数赋值为空，正常情况下是可以实现的，但是在这里它是用到了elementUI的组件，所以有自己的规则，普通的清空是无法实现的，所以需要用到下面的这段代码。

它的作用是在反显赋值的时候，将表单的第一次校验清除掉

this.$nextTick(() => this.$refs.ruleForm.clearValidate())

所以加上这段代码后就实现啦

el-upload

element ui 右键删除 elementui输入框清除_element ui 右键删除_02


附件上传同样如此，起初的想法是待提交成功后将上传参数赋值清空，然而并没有任何作用，一直在文件上传成功的钩子徘徊，后来查找资料发现，它同样需要ref，用:ref 绑定控件，$refs 获取控件

1、在el-upload中添加ref="upload"

<el-upload
    ref="upload"
    class="uploadFile"
    :action="uploadUrl"
    :on-change="handleChange"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :on-remove="handleRemove"
    :on-error="handleError"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">（每个文件大小不超过10M）</div>
  </el-upload>

2、然后在提交发布时添加

// 上传完成后执行清空
this.$refs.upload.clearFiles()

最后就实现啦

总结

在vue以及elementUI这多了解一下用:ref 绑定控件，$refs 获取控件，当我们的某个需求没有实现的时候，官方文档也没有找到合适的解决办法，可以试试这个属性ref。最近发现它的用处是真的很大，记下啦！