Vue3 | Element Plus resetFields不生效

1. 簡(jiǎn)介

先打開創(chuàng)建對(duì)話框沒有問題，但只要先打開編輯對(duì)話框，后續(xù)在打開對(duì)話框就會(huì)有默認(rèn)值，還無法使用resetFields()重置。
下面是用來復(fù)現(xiàn)問題的示例代碼和示例GIF。

<script setup>
import {ref} from 'vue'const formRef = ref(null)
const dialogFormVisible = ref(false)
const title = ref('')
const formData = ref({username: null,password: null,
})const createDialog = () => {title.value = '創(chuàng)建'dialogFormVisible.value = true
}const resetDialog = () => {formRef.value.resetFields()
}const editDialog = () => {title.value = '編輯'// 模擬待編輯數(shù)據(jù)let user = {'username': 'yimtcode','password': '123456'}Object.assign(formData.value, user)dialogFormVisible.value = true
}const closeDialog = () => {formRef.value.resetFields()dialogFormVisible.value = false
}
</script><template><el-dialog :title="title" v-model="dialogFormVisible" :before-close="closeDialog"><el-form ref="formRef" :model="formData"><el-form-item label="username" prop="username"><el-input v-model="formData.username" autocomplete="off"></el-input></el-form-item><el-form-item label="password" prop="password"><el-input v-model="formData.password" autocomplete="off"></el-input></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="resetDialog">reset</el-button><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormVisible = false">確 定</el-button></span></template></el-dialog><el-button @click="createDialog">create</el-button><el-button @click="editDialog">edit</el-button>
</template><style scoped>
</style>

2. 原因

前置知識(shí)：el-form會(huì)記錄第一次打開的值，當(dāng)作表單的默認(rèn)值。在后續(xù)調(diào)用resetFields會(huì)將當(dāng)前綁定的數(shù)據(jù)對(duì)象設(shè)置為el-form默認(rèn)值。

1. editDialog
   1. title.value = '編輯'
   2. Object.assign(formData.value, user)
   3. dialogFormVisible.value = true：??注意此時(shí)el-form將第一次打開的formValue值當(dāng)成默認(rèn)值也就是user對(duì)象的值。
2. closeDialog
   1. formRef.value.resetFields()：??此處重置是有問題，會(huì)將當(dāng)前formData值重置為user對(duì)象的值，因?yàn)楫?dāng)前el-form默認(rèn)值在上面已經(jīng)變成了user。
   2. dialogFormVisible.value = falseu
3. createDialog打開對(duì)話框時(shí)，el-form就會(huì)將上面user當(dāng)成默認(rèn)值。

3. 解決方法

1. 先讓編輯對(duì)話框顯示，完成el-form初始化，防止將當(dāng)前user信息當(dāng)成默認(rèn)值，影響createDialog。
2. 在下一個(gè)DOM更新，在把數(shù)據(jù)更新上已經(jīng)顯示的對(duì)話框。

const editDialog = () => {title.value = '編輯'dialogFormVisible.value = truenextTick(() => {// 模擬待編輯數(shù)據(jù)let user = {'username': 'yimtcode','password': '123456'}Object.assign(formData.value, user)})
}

4. 參考

• resetFields重置初始值不生效的原因