欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue+elementui 對話框取消 表單驗(yàn)證重置示例

 更新時(shí)間：2019年10月29日 10:06:52   作者：julying  
今天小編就為大家分享一篇vue+elementui 對話框取消 表單驗(yàn)證重置示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

最近在寫增刪改查，在新增的時(shí)候要彈出對話框填寫form表單信息，發(fā)現(xiàn)對話框右上角的小X和右下角的取消不是一個(gè)事件，我想在點(diǎn)擊它們兩個(gè)的時(shí)候都可以重置表單，最終解決，如下。

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;
   // 點(diǎn)擊取消 數(shù)據(jù)重置
   this.$refs[formName].resetFields();
  },
  // 對話框關(guān)閉事件
  closeDialog(){
   // 點(diǎn)擊關(guān)閉 數(shù)據(jù)重置
   this.$refs['form'].resetFields();
  }
 }
}

總結(jié)：

this.$refs[formName].resetFields();在數(shù)據(jù)重置時(shí)，因?yàn)槿∠粹o綁定了formName，所以可以不填寫而直接寫formName，但關(guān)閉沒有綁定，所以[‘form']里面寫formName就可以了。

以上這篇vue+elementui 對話框取消 表單驗(yàn)證重置示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • vue自定義全局共用函數(shù)詳解

    vue自定義全局共用函數(shù)詳解

    今天小編就為大家分享一篇vue自定義全局共用函數(shù)詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue ssr 指南詳讀

    vue ssr 指南詳讀

    這篇文章主要介紹了vue ssr 指南詳讀,詳細(xì)的介紹了什么是SSR以及如何使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-06-06
  • 解決vue項(xiàng)目使用font-awesome,build后路徑的問題

    解決vue項(xiàng)目使用font-awesome,build后路徑的問題

    今天小編就為大家分享一篇解決vue項(xiàng)目使用font-awesome,build后路徑的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue+NodeJS實(shí)現(xiàn)大文件上傳的示例代碼

    Vue+NodeJS實(shí)現(xiàn)大文件上傳的示例代碼

    常見的文件上傳方式可能就是new一個(gè)FormData，把文件append進(jìn)去以后post給后端就可以了。但如果采用這種方式來上傳大文件就很容易產(chǎn)生上傳超時(shí)的問題。所以本文將利用Vue+NodeJS實(shí)現(xiàn)大文件上傳，需要的可以參考一下
    2022-05-05
  • vue+django實(shí)現(xiàn)一對一聊天功能的實(shí)例代碼

    vue+django實(shí)現(xiàn)一對一聊天功能的實(shí)例代碼

    這篇文章主要介紹了vue+django實(shí)現(xiàn)一對一聊天功能,主要是通過websocket，由于Django不支持websocket，所以我使用了django-channels。，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2019-07-07
  • 基于Vue3+TypeScript實(shí)現(xiàn)圖片預(yù)覽組件

    基于Vue3+TypeScript實(shí)現(xiàn)圖片預(yù)覽組件

    在現(xiàn)代的 Web 應(yīng)用中,圖片預(yù)覽是一個(gè)常見的需求,本文將介紹如何使用 Vue3 和 TypeScript 開發(fā)一個(gè)圖片預(yù)覽組件,支持展示單張或多張圖片,并提供了豐富的配置選項(xiàng),需要的朋友可以參考下
    2024-04-04
  • vue 獲取到數(shù)據(jù)但卻渲染不到頁面上的解決方法

    vue 獲取到數(shù)據(jù)但卻渲染不到頁面上的解決方法

    這篇文章主要介紹了vue 獲取到數(shù)據(jù)但卻渲染不到頁面上的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • Vue3+Vite+ElementPlus構(gòu)建學(xué)習(xí)筆記

    Vue3+Vite+ElementPlus構(gòu)建學(xué)習(xí)筆記

    這篇文章主要介紹了Vue3+Vite+ElementPlus構(gòu)建的相關(guān)資料,文中還介紹如何在Vue3項(xiàng)目中加入ElementPlus庫,并提供了完整引入的示例,需要的朋友可以參考下
    2024-12-12
  • vue-jsonp的使用及說明

    vue-jsonp的使用及說明

    這篇文章主要介紹了vue-jsonp的使用及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-12-12
  • 使用 Vue cli 3.0 構(gòu)建自定義組件庫的方法

    使用 Vue cli 3.0 構(gòu)建自定義組件庫的方法

    本文旨在給大家提供一種構(gòu)建一個(gè)完整 UI 庫腳手架的思路。通過實(shí)例代碼給大家講解了使用 Vue cli 3.0 構(gòu)建自定義組件庫的方法，感興趣的朋友跟隨小編一起看看吧
    2019-04-04

最新評論