vue+elementui 对话框取消表单验证重置

Myth丶恋晨 2022-04-18 01:21 488阅读 0赞

最近在写增删改查，在新增的时候要弹出对话框填写form表单信息，发现对话框右上角的小X和右下角的取消不是一个事件，我想在点击它们两个的时候都可以重置表单，最终解决，如下。

vue：

<el-dialog 
    :title="titleName[dialogStatus]" 
    :visible.sync="dialogFormVisible" 
    @close="closeDialog" 
    :close-on-click-modal="false">
        <el-form :model="form" :rules="rules" ref="form">
            ...
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeForm('formb')">取消</el-button>
            <el-button type="primary" @click="submitForm('formb')" v-show="save">保存</el-button>
        </div>
    </el-dialog>

js：

export default{
        data() {
            form: {
            }
        },
        methods:{
            // 对话框取消事件
            closeFrom(formName){
                this.dialogFormVisible = false;
                // 点击取消 数据重置
                this.$refs[formName].resetFields();
            },
            // 对话框关闭事件
            closeDialog(){
                // 点击关闭 数据重置
                this.$refs['form'].resetFields();
            }
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，488人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue + element-ui表单重置 resetFields问题（无法重置表单）

问题： elementui在重置表单时，无法使用`this.$refs['formRefVal'].resetFields()`清空表单数据; elementui ...

怼烎@/ 2024年04月18日 17:05/ 0 赞/ 65 阅读

相关 vue重置表单，resetFields无法重置数据

状况描述：今天做一个登录页面，需要模拟提前缓存用户之前的信息，然后如果用户需要更换用户信息，那么用户就要点击重置按钮，但是重置了以后数据无法清空！在网上找了相关案例，用于解决这

梦里梦外;/ 2023年09月26日 09:04/ 0 赞/ 64 阅读

相关 vue重置form表单

使用 this.$options.data() 方法 <el-button @click="rest" size="mini" class="btn">重置<

我不是女神ヾ/ 2022年09月15日 12:50/ 0 赞/ 273 阅读

相关 iView 表单重置

在Vue里面，想重置iView的表单，需要在FormItem中指定prop属性，FormItem包含的控件需要双向绑定表单Model对象，同时表单Model对象也要因应控件类型

ゝ一纸荒年。/ 2022年08月30日 11:45/ 0 赞/ 211 阅读

相关 Element 表单重置

Element 表单重置的时候发现，不能把表单绑定的数据重置为空，这是因为我们在给表单赋值的操作其实是在created 进行绑定的，而 Element 的表单重置是重置为mun

亦凉/ 2022年08月29日 10:24/ 0 赞/ 201 阅读

相关 AngularJS系列(十)——表单的重置和验证

表单重置表单重置实例 <div ng-app="myApp"ng-controller="formCtrl"> <form novalidat

以你之姓@/ 2022年06月08日 00:12/ 0 赞/ 346 阅读

相关 vue+elementui 对话框取消表单验证重置

最近在写增删改查，在新增的时候要弹出对话框填写form表单信息，发现对话框右上角的小X和右下角的取消不是一个事件，我想在点击它们两个的时候都可以重置表单，最终解决，如下。 v

Myth丶恋晨/ 2022年04月18日 01:21/ 0 赞/ 489 阅读

相关表单重置

由于JQuery中，提交表单是像下面这样的： $('yigeform').reset(); 但是，不幸的是，这样写的话，会有一个让你很郁闷的结果，那就是，表单无法重

向右看齐/ 2022年04月16日 02:10/ 0 赞/ 313 阅读

相关 iview表单重置以及重置验证信息

表单内容添加一般都是在弹出框中进行编辑、修改、新增的如以下这段编辑代码：  <Modal :mask-clo

你的名字/ 2021年09月20日 03:00/ 0 赞/ 539 阅读

相关 JS--JavaScript提交表单（submit事件）、重置表单、取消默认提交表单（单击按钮、回车）

提交表单使用< input > 或 < button >标签都可以定义提交按钮，只要将type属性值设置为“submit”即可，而图像按钮则是通过将 < input >

痛定思痛。/ 2021年08月13日 18:15/ 0 赞/ 563 阅读