element plus + vue3表单第一次数据未清空的bug问题解决
使用框架:element Plus + vue3
场景描述:
场景一:
表单的添加和修改功能,公用同一个弹框,点击修改后,点击添加表单显示的是上次修改的数据。
场景二:
点击修改,数据回显到表单,然后点击取消关闭弹框,在关闭的时候使用resetFields()
清空数据,第二次点击修改的时候,回显的数据可以清空,但是表单的值会默认到第一次回显的数据。而且点击添加的时候,默认展示的就是第一次回显的数据。
官方提供表单校验以及清除数据的方法
场景一问题解决:
element plus
的弹框有一个close
方法,这个方法为弹框关闭时触发,在这个close
方法内调用清空表单方法resetFields()
,清空表单校验以及初始化表单数据。
<el-dialog
:close-on-click-modal="false"
@close="closeGift(giftBoxRef)"
:title="!isUpdate ? '添加' : '修改'"
v-model="BoxShow" >
</el-dialog>
// 关闭弹框
const closeGift = (formEl: FormInstance | undefined) => {
BoxShow.value = false;
if (!formEl) return;
formEl.resetFields(); // 清除表单校验以及表单数据初始化
};
场景二问题解决:
原因:在dialog
弹框打开的时候,form
表单的数据回显,这个时候表单的初始化数据其实是被回显的数据替换掉了,resetFields()
在清空数据的时候,会默认恢复数据到数据的初始值,如果第一次表单回显时初始化数据被替换,那么后续resetFields()
清空数据后恢复到的值会一直是第一次回显的值。
vue2
在vue2
中可以使用 this.$nextTick(() => {// 这里对表单进行赋值})
的方法解决
/* 修改 */
const updateBox = async (row: any) => {
this.$nextTick(() => {
// 这里对表单进行赋值
// formData = row
})
}
vue3
在vue3
中也可以使用nextTick
解决
import { nextTick } from "vue";
/* 修改 */
const dialogShow = ref(false); // 开启对话框
const updateBox = async (row: any) => {
dialogShow.value = true;
nextTick(() => {
// formData = row
});
};
nextTick 是将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。
注意:nesxTick建议放在函数的最后一步,如果dialogShow放在nextTick后,nextTick将不会产生作用。
表单清空的注意事项
element
的resetFields()
函数清空表单数据其实是跟表单上的prop
属性有关的,只有表单上存在对应的prop
属性,数据才会被清除。
<el-form
:model="data"
:rules="rule"
ref="giftBoxRef"
label-width="100px"
label-suffix=":"
>
<el-form-item label="名称" prop="name">
<el-input v-model="data.name" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="描述">
<el-input v-model="data.priceDesc" placeholder="请输入描述" />
</el-form-item>
</el-form>
const data = ref({
name : null,
priceDesc : null
})
在这里,名称的输入框添加了prop=name
,描述的部分没有添加,所以使用resetFields()
清空表单数据时,只会重置data
内的name
值。而priceDesc
的值不会有任何变化,需要手动重置。