需求

進行項目開發，用到了ElementUI的dialog彈出框，當再次點擊彈出框時發現，原本數據的還存在

解決

查閱了ElementUI的文檔，發現一個好東西

就是這個方法，解決了問題，分享一下用法

• 直接上代碼吧，根據代碼進行講解

<template><div><el-dialogtitle="彈框的標題（可以根據需求自己定義）":visible.sync="dialogVisible"width="80%"@close ='resetForms(點擊事件名稱，自定義)' > // 官方提供的回調方法<el-form ref="form" :model='form' label-width="200px" :inline="true" class="demo-form-inline" :rules="rules"><el-form-item label="區劃編碼" prop="QHBM"> <el-input v-model="form.QHBM" style="width:150px;"></el-input></el-form-item></el-form></el-dialog></div> </template> <script>export default{date(){return {form:{QHBM:'',}}},methods :{resetForms(){this.$refs['form'].resetFields(); // form是綁定數據,一定記得加prop參數，不加的話無法重置彈框表單數據},}} </script>

代碼展示

總結

按照這個方法，可以實現退出彈框時，數據重置的效果

總結

以上是生活随笔為你收集整理的ElementUI dialog弹框 退出时重置表单数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。