弹出的 Dialog 里,包含 Form,如何在关闭 Dialog 时,执行 resetFields(对整个表单进行重置,将所有字段值重置为初始值并移除校验结果)

做法:

  1. before-close 事件中,调用 resetFields
  2. 取消按钮事件中,调用 resetFields
                <el-dialog title="弹出窗口" :visible.sync="bindDialogVisible" :before-close="handleBeforeClose">
                    <el-form :model="bindForm" :rules="rules" ref="bindForm">
                        <el-form-item label="作者id" prop="member_id">
                            <el-input v-model.trim="bindForm.member_id" size="small" class="id_input"></el-input>
                        </el-form-item>
                        <el-form-item label="用户id" prop="c_id">
                            <el-input v-model.trim="bindForm.c_id" size="small" class="id_input"></el-input>
                        </el-form-item>
                    </el-form>
                    <p slot="footer" class="dialog-footer">
				        <el-button type="primary" @click="submitForm()">确认绑定</el-button>
				        <el-button @click="cancelDialog">取 消</el-button>
				    </p>
                </el-dialog>                    
        methods: {
            cancelDialog () {
                this.bindDialogVisible = false
                this.$refs['bindForm'].resetFields();
            },
            handleBeforeClose (done) {
                this.$refs['bindForm'].resetFields()
                done()
            }
        }
原文地址:https://www.cnblogs.com/cag2050/p/10755224.html