使用ELementPlus表单的resetFields不生效

需求：由于业务需求新增编辑使用同个dialog框，编辑根据id向后端获取数据回显，新增应直接清空dialog内的表单

问题： 直接打开新增弹窗没有问题，打开编辑弹窗关闭后打开新增弹窗 代码中已经使用了resetFields()进行表单清空无效

代码如下

<template>
  <Dialog
    class="wg-dialog"
    v-model="dialogVisible"
    :title="dialogTitle"
    width="1000px"
    :close-on-click-modal="false"
  >
    <div style="display: flex">
      <div style="width: 55%; border-right: 1px solid #cccccc">
        <div class="sub-title"><span class="blue-icon"></span>素材信息</div>
        <div>
          <el-form
            class="-mb-15px"
            :model="sourceForm"
            ref="groupFormRef"
            :rules="rules"
            label-width="100px"
          >
            <el-form-item label="素材类型" prop="materialType">
              <el-radio-group
                :disabled="dialogTitle !== '新建素材'"
                style="margin: 0 10px"
                v-model="sourceForm.materialType"
                size="default"
                @change="changeType($event)"
              >
                <el-radio-button label="0">文本</el-radio-button>
                <el-radio-button label="1">图片</el-radio-button>
                <el-radio-button label="2">图文</el-radio-button>
                <el-radio-button label="3">音频</el-radio-button>
                <el-radio-button label="4">视频</el-radio-button>
                <el-radio-button label="5">文件</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="归属分组" prop="groupIds">
              <el-tree-select
                class="select-input"
                node-key="id"
                check-strictly
                :props="treeProps"
                :render-after-expand="false"
                v-model="sourceForm.groupIds"
                multiple
                :data="belongOptions"
                :default-expanded-keys="[100]"
              >
                <template #default="{ data }">
                  <span>{{ `${data.groupName}(${data.topicNum})` }}</span>
                </template>
              </el-tree-select>
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <el-input
                style="width: 87%"
                v-model="sourceForm.title"
                placeholder="请输入标题"
                clearable
                show-word-limit
                maxlength="50"
              />
            </el-form-item>
            <el-form-item label="搜索关键词" prop="searchTerm">
              <el-input
                style="width: 87%"
                v-model="sourceForm.searchTerm"
                placeholder="多个关键词逗号隔开(,)"
              />
            </el-form-item>
            <el-form-item label="内容标签" prop="contentTag">
              <el-input
                style="width: 87%"
                v-model="sourceForm.contentTag"
                placeholder="多个标签逗号隔开(,)"
              />
            </el-form-item>
            <el-form-item label="设为雷达链接" prop="isRadarLink">
              <el-switch v-model="sourceForm.isRadarLink" :active-value="1" :inactive-value="0" />
            </el-form-item>
   
    <template #footer>
      <div>
        <el-button type="primary" :loading="subLoading" @click="confirm">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
const sourceForm = ref({
  materialType: 0,
  groupIds: '',
  title: '',
  searchTerm: '',
  isRadarLink: '',
  contentTag: '',
})
const groupFormRef = ref<FormInstance>()
const openDialog = async (type, data) => {
  dialogTitle.value = type === 'create' ? '新建' : '编辑'
  dialogVisible.value = true
  if (data) {
    const res = await getSourceDetails({ id: data.id })
    nextTick(() => {
      sourceForm.value = res
      image.value = res.filePaths
      console.log('image.value',image.value)
      sourceForm.value.groupIds = res.attributionGroup
    })
  }else{
    groupFormRef.value?.resetFields()
  }
}

defineExpose({ openDialog }) // 提供 openModal 方法
</script>

按照上面的代码 使用resetFields()无法进行清空，考虑到可能是没有监听到ref的问题

于是使用watch进行监听，依然无法重置

watch(
  groupFormRef,
  (val) => {
    if (val && dialogTitle.value === '新建') {
     //这里的ref打印出来是有值的，但是依然无法进行清空
       console.log('groupFormRef.value', groupFormRef.value)
       groupFormRef.value?.resetFields()
    }
  },
  {
    deep: true
  }
)

于是在网上百度查到的原因可能是

el-form会记录第一次打开的值当做表单的默认值 ，在后续调用resetFields会将当前绑定的数据对象设置为el-form的默认值

1.编辑时

const res = await getSourceDetails({ id: data.id })
sourceForm.value = res

dialogVisible.value = true （此时将第一次打开的formValue值当成是默认值）

2.关闭

groupFormRef.value?.resetFields() （此处重置有问题 会将当前的form值重置为返回的res的值）

所以采用下面的办法解决

const defaultValue = {
  materialType: 0,
  groupIds: '',
  title: '',
  searchTerm: '',
  isRadarLink: 1,
  contentTag: '',
  graphic: '',
  author: '',
  link: '',
  isShare: 0,
  isEfficient: 1, //是否有效 默认为1
  isSuitableBrand: 0,
  suitableBrands: null,
  isSuitableMechanism: 0,
  suitableMechanisms: null,
  isShow: 1,
  efficientType: 0,
  efficientTimes: null,
  materialSource: '系统维护',
  files: <any>[]
}

//素材信息
const sourceForm = ref(defaultValue)

watch(
  groupFormRef,
  (val) => {
    if (val && dialogTitle.value === '新建素材') {
      sourceForm.value = defaultValue
    }
  },
  {
    deep: true
  }
)

这样就可以清空啦！！