ElementUI的表单验证(二)之dialog关闭验证

ElementUI的表单验证及常用规则续集// https://www.jianshu.com/p/d71dc34193b4
dialog中使用ElementUI表单验证时，我们在关闭dialog与点击提交后需要将表单内容清空，并取消验证。使用 this.$refs[form].resetFields();将form表单重置

image.png

所以将dialog关闭事件中添加内容清空的方法即可，
//@close是dialog的关闭事件

<el-dialog title="申请撤销" :visible.sync="dialogFormVisible" @close="closeDilog('form')">
    <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="撤销原因 ：" prop="reason" :label-width="formLabelWidth">
            <el-input v-model="form.reason"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="cancelReport('form')">提 交</el-button>
    </div>
</el-dialog>

关闭方法

closeDilog:function(form){
    this.dialogFormVisible = false;
    this.$refs[form].resetFields();//将form表单重置
},

ElementUI的表单验证(二)之dialog关闭验证

推荐阅读更多精彩内容