elementui组件如何解决输入框内容清空问题(:ref 绑定控件,$refs 获取控件)
111解决element的表单校验输入框有值但校验未通过的问题2222vue的Element组件上传文件el-upload上传成功后清空
·
问题发现:
我在前端开发时,用的是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。最近发现它的用处是真的很大,记下啦!
更多推荐
已为社区贡献4条内容
所有评论(0)