ElementUI組件Dialog彈窗再次打開(kāi)表單仍顯示上次數(shù)據(jù)的問(wèn)題

更新時(shí)間：2023年04月04日 14:23:01 作者：IT__learning

這篇文章主要介紹了ElementUI組件Dialog彈窗再次打開(kāi)表單仍顯示上次數(shù)據(jù)的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

ElementUI組件Dialog彈窗再次打開(kāi)表單仍顯示上次數(shù)據(jù)

問(wèn)題描述：在使用vue+element開(kāi)發(fā)Dialog嵌套表單的時(shí)候，表單交數(shù)據(jù)關(guān)閉之后再次打開(kāi)表單沒(méi)有重置，仍顯示上次輸入的數(shù)據(jù)。

點(diǎn)擊新增，顯示彈窗

添加后，數(shù)據(jù)顯示在頁(yè)面中。當(dāng)再次點(diǎn)擊新增時(shí)出現(xiàn)以下界面：仍保留上次的數(shù)據(jù)，而且若修改表單中數(shù)據(jù)頁(yè)面中的數(shù)據(jù)也會(huì)被修改。

根本原因是 form表單對(duì)象保留了上次的數(shù)據(jù)，應(yīng)該將其置空。

重置方法

嵌套表單的彈窗的代碼：

<el-button type="text" @click="dialogFormVisible = true" 
	@open="resetForm">彈窗</el-button>    //@open事件綁定打開(kāi)表格時(shí)重置

<el-dialog title="收貨地址" :visible.sync="dialogFormVisible">
    <el-form :model="form" ref="form" :rules="rules">
       <el-form-item prop="id" label="編號(hào)" :label-width="formLabelWidth">
            <el-input v-model="form.id" autocomplete="off"></el-input>
       </el-form-item>
       <el-form-item prop="name" label="名稱(chēng)" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
       </el-form-item>
       <el-form-item prop="type" label="型號(hào)" :label-width="formLabelWidth">
            <el-input v-model="form.type" autocomplete="off"></el-input>
       </el-form-item>
       <el-form-item prop="company" label="廠家" :label-width="formLabelWidth">
            <el-input v-model="form.company" autocomplete="off"></el-input>
       </el-form-item>
    </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">確 定</el-button>
  </div>
</el-dialog>

<script>
  export default {
    form:{
            id:'',
            name:'',
            type:'',
            company:''
                }
    methods:{
    	resetForm(){
              this.form={};   //重置表格對(duì)象
                }
    	}
    }
  };
</script>

將Dialog彈窗的打開(kāi)事件綁定方法，然后在方法中使用this.form={}進(jìn)行重置。

this.form={}這個(gè)的意思是把表單初始化為一個(gè)空對(duì)象，后期可以往這個(gè)對(duì)象里賦值。

關(guān)閉element UI的彈窗，再次打開(kāi)顯示表單驗(yàn)證提示

打開(kāi)彈窗，沒(méi)有填寫(xiě)任何信息，點(diǎn)擊保存按鈕，觸發(fā)了表單的驗(yàn)證提示，沒(méi)有進(jìn)行任何操作，點(diǎn)擊【關(guān)閉按鈕】或者【取消按鈕】關(guān)閉彈窗，再次打開(kāi)彈窗，仍然顯示表單的驗(yàn)證提示信息，