element-ui的表单重置方法resetFields()无效问题

Element-ui的form表单验证清除问题一直是个坑，每次点开新增弹框或是打开编辑弹框时，表单的验证都没有正确地被清除。

单独用 this.$refs['form'].clearValidate() 好像不太行，于是就加上了 this.$nextTick(() => { this.$refs['form'].clearValidate() }) ，嗯，好像是没什么问题了，每次点开新增弹框，表单验证都有被好好地清除，可没想到，点完编辑再点新增，问题又来了，表单验证又出来了了。。。网上看了好久，终于找到一个比较靠谱的方法：

在打开新增弹框的时候加上：

this['form'] = {} // 需要多加这一步

this.$nextTick(() => { this.$refs['form'].resetFields() }) // 我这里是清空表单，包括数据

this.dialogVisible = true

在打开编辑弹框的时候加上：

this.$nextTick(() => { this.$refs['form'].clearValidate() }) // 这里只是清空验证，没有清除数据

this.dialogVisible = true

记录一下这次的踩坑，不知道还有没有其他的解决方案。

<el-button type="primary" @click="handleAdd">新增</el-button>
<el-button size="mini" type="primary" @click="handleEdit(scope.row)"><span class="el-icon-edit"></span>编辑
</el-button>

<el-dialogtitle="系统维护管理":visible.sync="dialogVisible":close-on-click-modal="false"width="45%"class="dialog_content"><div class="dialog_title">系统菜单配置</div><el-form ref="form" :model="form" :rules="rules" label-width="150px" class="dialog_wrapper"><div><el-form-item label="记录编号:" prop="id"><el-input v-model="form.id" size="small" clearable></el-input></el-form-item></div><div><el-form-item label="名称:" prop="name"><el-input v-model="form.name" size="small" clearable></el-input></el-form-item></div><div><el-form-item label="链接地址:" prop="url"><el-input v-model="form.url" size="small" clearable></el-input></el-form-item></div></el-form><div class="dialog_footer"><el-button size="small" @click="handleCancel">取 消</el-button><el-button size="small" type="primary" @click="handleConfirm('form')">确 定</el-button></div></el-dialog>

handleCancel () {this.$nextTick(() => {this.$refs['form'].clearValidate()})this.dialogVisible = false},
handleEdit (row) {this.$nextTick(() => {this.$refs['form'].clearValidate()})this.dialogVisible = true},
handleAdd () {this['form'] = {}this.$nextTick(() => {this.$refs['form'].resetFields()})this.dialogVisible = true}

element-ui的表单重置方法resetFields()无效问题相关推荐

Element UI进行表单校验的时候，输入正确内容后，还有提示问题
问题:表单中输入正确的内容后,还提示请输入内容部分代码如下: // 表单 <el-dialog title="添加用户" :visible.sync="dialo ...
Element UI自定义表单验证公共提取
2019独角兽企业重金招聘Python工程师标准>>> 主要代码: util文件夹下validate.js 文件 export const VDT = {messages:{requ ...
ElementUI中el-form实现表单重置以及将方法抽出为全局方法
场景使用el-form时,点击重置按钮或者取消按钮时会实现表单重置效果. 那么el-form怎样实现表单重置,如果在多个页面需要用到重置,怎样将此方法抽出为全局的方法,在需要用到的地方直接引用. 注 ...
【HTML】form表单重置、清空方法记录
form表单重置.清空方法记录 myform 是 form 的 id 属性值调用 reset()方法 function fomrReset() {document.getElementById(&q ...
功能：登录和退出（表单重置和预验证、路由导航守卫、路由重定向）
3.登录/退出功能 3.1登录概述 3.1-1.登录业务流程 ①在登录页面输入用户名和密码 ②调用后台接口进行验证 ③通过验证之后,根据后台的响应状态跳转到项目主页 3.1-2.登录业务的相关技术点 ...
element实现form表单动态添加email效果
前言: vue中使用element实现form表单动态添加email效果效果: 实现步骤: 实现源代码: <template><div><el-form ref=&qu ...
ElementUI实现el-form表单重置功能按钮
目录业务场景: 效果演示: 业务场景: 使用el-form时,点击重置按钮或者取消按钮时会实现表单重置效果. 重置功能按钮功能实现详细步骤: 第一:首先给el-form添加ref属性. <el ...
elementUI form表单重置问题
elementUI form表单重置问题问题如果修改了data里的表单form默认值,那么重置以后就是你修改以后的值,而不是data里的值了所以this.$refs.ruleForm.resetF ...
ElementUI 之el-form表单重置功能按钮
业务场景: 使用el-form时,点击重置按钮或者取消按钮时会实现表单重置效果. 重置功能按钮功能实现详细步骤: 第一:首先给el-form添加ref属性. <el-form :inline=& ...

element-ui的表单重置方法resetFields()无效问题

element-ui的表单重置方法resetFields()无效问题相关推荐

最新文章

热门文章