vue 处理新增弹窗清除默认值

场景：1、点击新增和编辑出来是同一个弹窗
            2、点击新增保存后，这时点击编辑按钮带出数据，再点击取消编辑按钮
           3、此时再此点击新增按钮带出了编辑的数据

问题：新增弹窗的没有初始化数据，仍带出编辑的数据

 

 

引入弹窗组件用ref绑定dom节点

<iss-create-card
    v-model:visible="viewVisible"
    :init-value="activeItem"
    ref="formRef"
    @fnOk="handleFnOkByEdit"
  />

定义ref的值

 const formRef = ref(null)

在新建方法里面获取到绑定节点的值，并用 resetFields 清除

      // 新建
      handleNewCard: () => {
      
        state.activeItem = {};
        state.viewVisible = true;
        formRef.value.resetFields()

      },

 

resetFields 方法需要在弹窗的内容去进行初始化

    const { validateInfos, validate, resetFields} = Form.useForm(form,
      {
        templateName: [required, { max: 50, message: '不可超过50个字' }],
        templateUrl: [required]
      });