1.如下是基于element的表单重置操作
1.创建输入框
2.创建一个重置按钮
3.输入框的数据进行ref绑定
4.给按钮绑定点击事件,调出实列对象进行重置
2.解析方法:
1.ref="loginref" 拿到整个表单的实例对象,可以进行重置
2. @click="resetlogin" 绑定点击事件,拿到$refs实例对象进行重置
3.在点击事件中用element表单提供的resetFields的方法进行重置
3.具体使用(全部代码)
//ref="loginref" 拿到整个表单的实例对象,可以进行重置
<el-form
ref="loginref"
>
<el-form-item prop="username">
<el-input
></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
></el-input>
</el-form-item>
<el-form-item class="btns">
<el-button type="info" @click="resetlogin">重置</el-button>
</el-form-item>
</el-form>
methods: {
// 点击按钮重置表单
resetlogin() {
// 查看实例对象
//resetFields()是饿了么方法
// 重置
this.$refs.loginref.resetFields();
},
}
这篇博客介绍了如何在Vue.js应用中利用Element UI库来完成表单的重置操作。通过为表单元素绑定ref属性,然后在点击事件中调用$refs获取表单实例,再使用resetFields()方法可以轻松实现表单的重置,确保所有输入框回到初始状态。
496

被折叠的 条评论
为什么被折叠?



