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-dialog
title="系统维护管理"
: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
}