vue+elementui 對話框取消 表單驗證重置示例
更新時間：2019年10月29日 10:06:52 作者：julying
今天小編就為大家分享一篇vue+elementui 對話框取消 表單驗證重置示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
最近在寫增刪改查，在新增的時候要彈出對話框填寫form表單信息，發(fā)現(xiàn)對話框右上角的小X和右下角的取消不是一個事件，我想在點擊它們兩個的時候都可以重置表單，最終解決，如下。
vue：
<el-dialog
:title="titleName[dialogStatus]"
:visible.sync="dialogFormVisible"
@close="closeDialog"
:close-on-click-modal="false">
<el-form :model="form" :rules="rules" ref="form">
...
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeForm('formb')">取消</el-button>
<el-button type="primary" @click="submitForm('formb')" v-show="save">保存</el-button>
</div>
</el-dialog>
js：
export default{
data() {
form: {
}
},
methods:{
// 對話框取消事件
closeFrom(formName){
this.dialogFormVisible = false;
// 點擊取消 數(shù)據(jù)重置
this.$refs[formName].resetFields();
},
// 對話框關閉事件
closeDialog(){
// 點擊關閉 數(shù)據(jù)重置
this.$refs['form'].resetFields();
}
}
}
總結：
this.$refs[formName].resetFields();在數(shù)據(jù)重置時，因為取消按鈕綁定了formName，所以可以不填寫而直接寫formName，但關閉沒有綁定，所以[‘form']里面寫formName就可以了。
以上這篇vue+elementui 對話框取消 表單驗證重置示例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue中上傳視頻或圖片或圖片和文字一起到后端的解決方法，需要的朋友可以參考一下2019-12-12
這篇文章主要介紹了在Vue中使用HOC模式的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
這篇文章主要介紹了Vue如何比較字符串變化并高亮變化的部分問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單分頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
本篇文章主要介紹了vue封裝第三方插件并發(fā)布到npm的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vscode vue 文件模板的配置方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
Teleport是一個內置組件，它可以將一個組件內部的一部分模板“傳送”到該組件的?DOM?結構外層的位置去，本文就來介紹一下如何使用，感興趣的可以了解一下2023-05-05
這篇文章主要為大家詳細介紹了Vues實現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
一般在vue項目開發(fā)中，事件的處理邏輯一般很復雜，我們可以將處理的邏輯變成函數(shù)，在vue開發(fā)中，一般使用的是使用的是v-on指令進行事件的監(jiān)聽，事件監(jiān)聽的過程中觸發(fā)相應的JavaScript代碼2022-08-08
在本篇文章里小編給大家分享的是一篇關于Vue—v-bind動態(tài)綁定class的知識點內容，有需要的朋友們可以參考下。2020-01-01