element plus resetFields

表单方法 resetFields 重置该表单项,将其值重置为初始值,并移除校验结果,一般用在表单提交成功后使用,方法都是组件实例调用 注意是将表单重置为form组件dom刚渲染时的初始值,如果你的表单是放在抽屉中,刚开始是不会被渲染的,当打开抽屉时才会被渲染,如果你是先点击的编辑打开的抽屉以及表单,那么表单的的初始值就是回显的那一个初始值

今天做的一个后台项目中使用了抽屉和表单,

 点击编辑后会打开抽屉,点击新增也会打开这个抽屉,编辑和新增共拥一份抽屉表单。

但是我发现了一个小问题,当我刚进入页面后,我没有点击新增,而是点击了编辑某一条,(ps:点击新增展示的表单是空的,点击编辑会把当前这条内容回显到表单中)

我在开头已经说了表单重置方法的重置规则,如果你的表单是放在抽屉中,刚开始是不会被渲染的,当打开抽屉时才会被渲染,如果你是先点击的编辑打开的抽屉以及表单,那么表单的的初始值就是回显的那一个初始值,所以在后面你的其他按钮内用到了表单的重置方法后,重置后都是“那个带有数据的初始值”

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果 `resetFields` 方法在 `element-plus` 中无效,可能是以下原因导致的: 1. 表单域的 `model` 对象没有正确绑定到表单上,导致无法重置表单。 2. 未正确引入 `el-form` 组件或者未正确使用 `el-form-item` 组件,导致表单无法正确渲染。 3. `resetFields` 方法没有正确调用。应该使用 `$refs` 引用表单组件,并在需要时调用 `resetFields` 方法。 以下是一个示例代码,可以参考一下: ```vue <template> <el-form :model="form" ref="myForm"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' } } }, methods: { submitForm() { this.$refs.myForm.validate(valid => { if (valid) { // 提交表单 } else { return false } }) }, resetForm() { this.$refs.myForm.resetFields() } } } </script> ``` 注意,在使用 `resetFields` 方法时,需要先使用 `$refs` 引用表单组件,然后调用该方法。上述代码中,我们使用了 `this.$refs.myForm` 引用了表单组件,并在重置表单时调用了 `resetFields` 方法。如果您的代码仍然无法正常工作,请检查上述三个原因是否存在问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值