新手上路~VUE3+Element-PLUS dialog弹出框重置表单不生效问题

最新推荐文章于 2024-06-20 09:39:36 发布

金金金__

最新推荐文章于 2024-06-20 09:39:36 发布

阅读量1.8k

点赞数 1

分类专栏：前端文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_45502195/article/details/128861993

版权

前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

文章讲述了在Vue应用中遇到的一个问题，即dialog弹窗中的表单在切换操作（如从编辑到新增）时无法正确清空。问题源于父组件通过子组件ref调用的打开和关闭方法。作者发现，当从编辑状态切换到新增状态时，由于之前已经给表单赋值，单纯调用清空方法仍会出现数据回显。解决方案是利用Vue的nextTick在DOM更新后清空表单，确保了数据的正确重置。

摘要由CSDN通过智能技术生成

遇到问题：添加操作，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;
};