弹出的 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()
            }
        }

posted on 2019-04-23 11:08  cag2050  阅读(626)  评论(0编辑  收藏  举报

导航