ElementUI的表單驗證(二)之dialog關閉驗證

ElementUI的表單驗證及常用規則續集// http://www.lxweimin.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表單重置
},
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一、表單基礎知識 在 JavaScript 中,表單對應的是 HTMLFormElement 類型。 HTMLFo...
    LemonnYan閱讀 956評論 0 3
  • ¥開啟¥ 【iAPP實現進入界面執行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程,因...
    小菜c閱讀 6,510評論 0 17
  • Angular 支持非常強大的內置表單驗證,maxlength、minlength、required 以及 pat...
    sunny_lvy閱讀 20,088評論 3 25
  • 我們大四,現在已經畢業了。 今晚一起聚餐。班主任導員還有我們。缺了四個同學沒有來,或許因為個別原因。 吃完這頓飯我...
    悲在心中225閱讀 270評論 0 1
  • 紙船漂走了再也不會返還樹葉落下了再也不會重回樹枝風箏斷了線再也不會起飛你走了還會再回來嗎 漂走了的紙船新疊好的又可...
    約定星空閱讀 278評論 0 4