遇到问题:添加操作,dialog弹出框里面的表单 清空不生效!!!
- 父组件 核心代码
<tempalte>
<roleDialog ref="roleDialogRef" @refresh="getTableData()"/>
</template>
<script setup lang="ts">
// 打开新增弹窗
import {defineAsyncComponent, ref} from 'vue';
const roleDialogRef = ref();
// 引入组件
const roleDialog = defineAsyncComponent(() => import('/@/views/system/organization/roleJurisdiction/dialog.vue'));
const onOpenAddPerson = (type: string) => {
roleDialogRef.value.openDialog(type);
};
// 打开修改弹窗
const onOpenEditDic = (type: string, row: RowRoleJurisdictionType) => {
roleDialogRef.value.openDialog(type, row);
};
</script>
- 子组件 核心代码
<script setup lang="ts">
const state = reactive({
ruleForm: {
name: '', // 角色名称
roleCode: '', // 角色编码
description: '', // 角色描述
},
})
// 打开弹窗
const openDialog = (type: string, row: RowRoleJurisdictionType) => {
if (type === 'edit') {
state.ruleForm = {...row}; // 对象解构赋值
state.dialog.title = '修改角色';
state.dialog.type = 'edita';
state.dialog.submitTxt = '修 改';
} else {
state.dialog.title = '新增角色';
state.dialog.type = 'add';
state.dialog.submitTxt = '新 增';
nextTick(() => {
roleDialogRef.value.resetFields(); // 清空表单
});
}
state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
state.dialog.isShowDialog = false;
};
</script>
思考问题:我父组件是通过子组件的ref调用子组件的打开、关闭弹窗方法
我先点击新增,在点击修改,再次点击新增正常。
如果先点击修改,在点击新增,新增里面就会有数据回显,可能是因为点击编辑的时候,已经给表单赋值了导致初始值已经有值了,所以我再次点击新增的时候 调用了清空表单的方法 也一样导致数据回显了
解决问题:中途尝试在关闭dialog弹窗的时候清空表单,也会概率性的出现表单未清空的情况。 官方文档解释:
重要:数据回显 用 nextTick 包裹解决问题!
// 打开弹窗
const openDialog = (type: string, row: RowRoleJurisdictionType) => {
if (type === 'edit') {
state.dialog.title = '修改角色';
state.dialog.type = 'edita';
state.dialog.submitTxt = '修 改';
nextTick(() => { // 重要!!!
state.ruleForm = {...row};
})
} else {
state.dialog.title = '新增角色';
state.dialog.type = 'add';
state.dialog.submitTxt = '新 增';
nextTick(() => {
roleDialogRef.value.resetFields(); // 清空表单
});
}
state.dialog.isShowDialog = true;
};