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

作法:this

  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()
            }
        }
相关文章
相关标签/搜索