this.$refs[xxx].resetFields();方法常見于彈出框內(nèi)搭配表單使用時(shí)調(diào)用,用于重置表單內(nèi)容光坝。這里解釋一下resetFields()尸诽,其本質(zhì)是初始化數(shù)據(jù)而不是清空數(shù)據(jù),理解這個(gè)本質(zhì)才能想明白在什么時(shí)候使用該方法才是正確的盯另。
查看百度很多解決思路都是有問題的性含,說的半知半解甚至完全不搭邊,首先resetFields()生效的前提條件有幾點(diǎn):
1.form上必須有ref屬性鸳惯,例如
<el-form :model="dataForm" :rules="dataRule" ref="dataForm">
這個(gè)ref隨便定義商蕴,但要注意單組件內(nèi)有多個(gè)form時(shí)ref不能重名
2.每個(gè)el-form-item上都要有prop屬性,并且prop應(yīng)該和綁定值名稱保持一致
<el-form-item label="名稱" prop="name">
<el-input
class="inline-input"
v-model="dataForm.name"
></el-input>
</el-form-item>
重置resetFields()方法不生效的解決方法:彈出框內(nèi)的表單重置要在每次提交表單芝发,關(guān)閉彈框前重置绪商,可以直接在@close回調(diào)中寫入,能解決彈出內(nèi)所有情況的重置
<el-dialog :title="id ? '編輯工具' : '新增工具'" width="50%" :visible.sync="visible" @close="handleClose">
//關(guān)閉彈出時(shí)調(diào)用
handleClose() {
console.log('關(guān)閉')
this.$refs["dataForm"].resetFields(); // 提交后重置辅鲸,不能打開時(shí)重置
}
誤區(qū):不要在進(jìn)入彈出框時(shí)執(zhí)行resetFields()方法來重置格郁,而是在關(guān)閉彈出前重置