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 對話框取消 表單驗證重置示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇vue自定義全局共用函數(shù)詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue ssr 指南詳讀,詳細的介紹了什么是SSR以及如何使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
解決vue項目使用font-awesome,build后路徑的問題
今天小編就為大家分享一篇解決vue項目使用font-awesome,build后路徑的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
常見的文件上傳方式可能就是new一個FormData，把文件append進去以后post給后端就可以了。但如果采用這種方式來上傳大文件就很容易產(chǎn)生上傳超時的問題。所以本文將利用Vue+NodeJS實現(xiàn)大文件上傳，需要的可以參考一下2022-05-05
vue+django實現(xiàn)一對一聊天功能的實例代碼
這篇文章主要介紹了vue+django實現(xiàn)一對一聊天功能,主要是通過websocket，由于Django不支持websocket，所以我使用了django-channels。，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2019-07-07
基于Vue3+TypeScript實現(xiàn)圖片預覽組件
在現(xiàn)代的 Web 應用中,圖片預覽是一個常見的需求,本文將介紹如何使用 Vue3 和 TypeScript 開發(fā)一個圖片預覽組件,支持展示單張或多張圖片,并提供了豐富的配置選項,需要的朋友可以參考下2024-04-04
vue 獲取到數(shù)據(jù)但卻渲染不到頁面上的解決方法
這篇文章主要介紹了vue 獲取到數(shù)據(jù)但卻渲染不到頁面上的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
這篇文章主要介紹了Vue3+Vite+ElementPlus構建的相關資料,文中還介紹如何在Vue3項目中加入ElementPlus庫,并提供了完整引入的示例,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了vue-jsonp的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
本文旨在給大家提供一種構建一個完整 UI 庫腳手架的思路。通過實例代碼給大家講解了使用 Vue cli 3.0 構建自定義組件庫的方法，感興趣的朋友跟隨小編一起看看吧2019-04-04