彈出的 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()
            }
        }
相關文章
相關標籤/搜索