ElementUI的表單驗(yàn)證(二)之dialog關(guān)閉驗(yàn)證

ElementUI的表單驗(yàn)證及常用規(guī)則續(xù)集// http://www.lxweimin.com/p/d71dc34193b4
dialog中使用ElementUI表單驗(yàn)證時(shí),我們?cè)陉P(guān)閉dialog與點(diǎn)擊提交后需要將表單內(nèi)容清空,并取消驗(yàn)證。使用 this.$refs[form].resetFields();將form表單重置

image.png

所以將dialog關(guān)閉事件中添加內(nèi)容清空的方法即可,
//@close是dialog的關(guān)閉事件

<el-dialog title="申請(qǐng)撤銷" :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>

關(guān)閉方法

closeDilog:function(form){
    this.dialogFormVisible = false;
    this.$refs[form].resetFields();//將form表單重置
},
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

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