如何在vue中使用elementui重置表單驗證

本篇文章給大家分享的是有關如何在vue中使用elementui重置表單驗證，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

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

總結：

this.$refs[formName].resetFields();在數據重置時，因為取消按鈕綁定了formName，所以可以不填寫而直接寫formName，但關閉沒有綁定，所以[‘form']里面寫formName就可以了。

以上就是如何在vue中使用elementui重置表單驗證，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。