【前端】resetFields()失效：点击编辑后再点击新增，弹出的表单是编辑的数据

背景

点击编辑时，会在表单内回显数据。点击新增时，调用resetFields()清空数据。发现清空失效，依旧显示编辑时的内容。

原理与解决

浅谈vue中resetFields()使用注意事项_vue.js_脚本之家

在编辑时，在表单打开之前就赋值了，表单会认为此时赋的值是默认值。

const handleEditIcons = (index: number) => {editIndex.value = indexconst data = configData2.value[index]dialogVisible.value = trueconfigForm.value = {...data,}
}

需要改成，在表单打开后赋值，即：

const handleEditIcons = (index: number) => {editIndex.value = indexconst data = configData2.value[index]dialogVisible.value = truenextTick(() => {configForm.value = {...data,}})
}

新增也是，在表单打开后重置：

const handleAddConfig = () => {editIndex.value = -1dialogVisible.value = truenextTick(() => {configFormRef.value?.resetFields()})
}

总结

想要清空生效，编辑：

  nextTick(() => {// 给表单赋值})

新增：

  nextTick(() => {configFormRef.value?.resetFields()})