elementUI清空表单校验及清空表单内容信息

最新推荐文章于 2024-05-07 15:11:34 发布

_Legend_King

最新推荐文章于 2024-05-07 15:11:34 发布

阅读量2k

点赞数 6

分类专栏： vue 文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/qq_63026743/article/details/135130839

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

当我们想在弹窗关闭后清空内容及校验时，官方文档已经给出了解决方案

通过调用 resetFields 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果

调用 clearValidate 移除表单项的校验结果

实现代码

<el-dialog title="重置密码" :visible.sync="dialogFormVisible" @close="$refs.ruleForm.resetFields()">
            <el-form :model="form" :rules="rules" ref="ruleForm">
                <el-form-item label="旧密码：" :label-width="formLabelWidth" prop="OldPassword">
                    <el-input v-model="form.OldPassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码：" :label-width="formLabelWidth" prop="NewPassword">
                    <el-input v-model="form.NewPassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="再次确认：" :label-width="formLabelWidth" prop="reconfirm">
                    <el-input v-model="form.reconfirm" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="outDialog('ruleForm')">取 消</el-button>
                <el-button type="primary" @click="ReconfirmPassword('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>

使用 @close 方法进行Dialog 关闭的回调，在关闭时使用$refs.ruleForm.resetFields()来进行清空校验

建议： 不要在取消时调用 this.$refs.ruleForm.resetFields() ,若在取消时调用点击遮罩层和X时不会进行清空