公司建设网站能提升什么竞争力,海外广告投放公司,正版网络推广公司,提升自己网站Vue3 | Element Plus resetFields不生效
1. 简介
先打开创建对话框没有问题#xff0c;但只要先打开编辑对话框#xff0c;后续在打开对话框就会有默认值#xff0c;还无法使用resetFields()重置。 下面是用来复现问题的示例代码和示例GIF。
script setup
import…Vue3 | Element Plus resetFields不生效
1. 简介
先打开创建对话框没有问题但只要先打开编辑对话框后续在打开对话框就会有默认值还无法使用resetFields()重置。 下面是用来复现问题的示例代码和示例GIF。
script setup
import {ref} from vueconst formRef ref(null)
const dialogFormVisible ref(false)
const title ref()
const formData ref({username: null,password: null,
})const createDialog () {title.value 创建dialogFormVisible.value true
}const resetDialog () {formRef.value.resetFields()
}const editDialog () {title.value 编辑// 模拟待编辑数据let user {username: yimtcode,password: 123456}Object.assign(formData.value, user)dialogFormVisible.value true
}const closeDialog () {formRef.value.resetFields()dialogFormVisible.value false
}
/scripttemplateel-dialog :titletitle v-modeldialogFormVisible :before-closecloseDialogel-form refformRef :modelformDatael-form-item labelusername propusernameel-input v-modelformData.username autocompleteoff/el-input/el-form-itemel-form-item labelpassword proppasswordel-input v-modelformData.password autocompleteoff/el-input/el-form-item/el-formtemplate #footerspan classdialog-footerel-button clickresetDialogreset/el-buttonel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clickdialogFormVisible false确 定/el-button/span/template/el-dialogel-button clickcreateDialogcreate/el-buttonel-button clickeditDialogedit/el-button
/templatestyle scoped
/style2. 原因
前置知识el-form会记录第一次打开的值当作表单的默认值。在后续调用resetFields会将当前绑定的数据对象设置为el-form默认值。
editDialog title.value 编辑Object.assign(formData.value, user)dialogFormVisible.value true⭐️注意此时el-form将第一次打开的formValue值当成默认值也就是user对象的值。 closeDialog formRef.value.resetFields()⭐️此处重置是有问题会将当前formData值重置为user对象的值因为当前el-form默认值在上面已经变成了user。dialogFormVisible.value falseu createDialog打开对话框时el-form就会将上面user当成默认值。
3. 解决方法
先让编辑对话框显示完成el-form初始化防止将当前user信息当成默认值影响createDialog。在下一个DOM更新在把数据更新上已经显示的对话框。
const editDialog () {title.value 编辑dialogFormVisible.value truenextTick(() {// 模拟待编辑数据let user {username: yimtcode,password: 123456}Object.assign(formData.value, user)})
}4. 参考
resetFields重置初始值不生效的原因
