antd vue中的表单重置问题

Question

问题是这样的，我想实现的功能是在我进行数据编辑的时候表单显示表格的数据，在我进行增加的时候表单重置为初始状态。

//表单绑定对象
const roleInfo: UnwrapRef<Role> = reactive({
                id: undefined,
                name: '',
                nameZh: '',
                crateTime:undefined,
                creator: '',
                summary:''
            });
            
 //表单html,外层是个modal,应该不影响就补铁了
 <a-form
                ref="formRef"
                :model="roleInfo"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
        >
            <a-form-item  label="id"    :hidden="addFlag" >
                <a-input v-model:value="roleInfo.id"  :disabled="!addFlag"/>
            </a-form-item>
            <a-form-item  label="代码" name="name" >
                <a-input v-model:value="roleInfo.name"  />
            </a-form-item>
           .....
        </a-form>
        
//增加方法
 const handleAdd = () => {
                reset();
                console.log(roleInfo);
                addFlag.value = true;
                visible.value = true;
            };      
 //编辑方法，role当前行
  const handleEdit = (role :Role)=>{
                reset();
                addFlag.value = false;
                visible.value = true;
                roleInfo.id = role.id;
                roleInfo.name = role.name;
                roleInfo.nameZh = role.nameZh;
                roleInfo.crateTime = role.crateTime;
                roleInfo.creator = role.creator;
                roleInfo.summary = role.summary;
            }                 

可是现在出现的问题是我在编辑的时候将该行数据赋给表单绑定的值，编辑回显数据是没问题的，但是当增加的时候进行antd提供的重置api进行重置后，重置的数据是我刚才赋值后的数据（也就是我在编辑方法中赋值的一行数据，另外我确定这个重置是起作用了，至少在清楚数据校验方面）我不清楚他这个重置是怎么设置的 ，我之前用iview也这么写也没什么问题呀。不过我赋值的时候使用的是这样的

this.$refs['tecRef'].resetFields();//重置表单信息
this.roleInfo= {...params.row}

当前要实现这个功能，也简单弄一个临时变量记录以下最初的值，增加的时候再赋值就好了，但是这么做不优雅，另外我也想搞懂这个antd的重置是只本来就这么设置的还是我写法的问题