场景:表格页面,点击操作栏编辑 / 详情打开弹窗正常回填,接着打开新增弹窗发现表单数据没有重置为空,调用.resetFields()不生效

原因:第一次打开编辑 / 详情弹窗时,el-dialog是懒加载的,这一行的数据对el-form进行了赋值,之后el-dialog才被渲染完成,里面的el-form才完成初始化,所以这个el-form表单使用.resetFields()进行初始化时每次都会生效,只不过初始化的值是第一次的数据

解决一:打开新增弹窗时等弹窗渲染完再调用重置方法

// 一,(vue2)this.$nextTick; (vue3)nextTick
const openAddModal = () => {
    dialogVisible.value = true;
    nextTick(()=>{
        ruleFormRef.value?.resetFields()
    })
};
// 二,定时器 setTimeout
const openAddModal = () => {
    dialogVisible.value = true;
    setTimeout(()=>{
        ruleFormRef.value?.resetFields()
    },0)
};

解决二:打开编辑 / 详情弹窗时使用深拷贝将表格内容赋值给表单

// 打开新增弹窗
const openAddModal = () => {
    dialogVisible.value = true;
    dialogTitle.value = "add";
    ruleFormRef.value?.resetFields()
};

// 修改弹窗
const handleEdit = (idx: number, row: any) => {
    dialogVisible.value = true;
    dialogTitle.value = "edit";
    nextTick(() => {
        basicForm.value = JSON.parse(JSON.stringify(row))
    })
}

// 详情弹窗
const showTesk = (idx: number, row: any) => {
    dialogVisible.value = true;
    dialogTitle.value = "show";
    nextTick(() => {
        basicForm.value = JSON.parse(JSON.stringify(row))
    })
}
最后修改:2023 年 08 月 24 日
如果觉得我的文章对你有用,请随意赞赏