问题发现:

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

解决问题:

el-input及el-tabs

这是目前前端页面想要实现的效果
在这里插入图片描述
但是我在提交表单时,提交成功后想要清空表单内容,它却无法实现
最终通过查找资料发现,你在调用接口,然后让参数赋值为空,正常情况下是可以实现的,但是在这里它是用到了elementUI的组件,所以有自己的规则,普通的清空是无法实现的,所以需要用到下面的这段代码。
它的作用是在反显赋值的时候,将表单的第一次校验清除掉

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

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

el-upload

在这里插入图片描述
附件上传同样如此,起初的想法是待提交成功后将上传参数赋值清空,然而并没有任何作用,一直在文件上传成功的钩子徘徊,后来查找资料发现,它同样需要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。最近发现它的用处是真的很大,记下啦!

Logo

前往低代码交流专区

更多推荐