vue3 表单验证规则不生效 resetFields

前言：本人遇到这个问题是因为编辑对话框之后要清空里面得数据，但是使用传统得赋值为空是不起效果的，结合对话框的close事件清空。话不多说，上代码

  <!-- 新增弹出框 --> 
  <el-dialog v-model="state.dialogFormVisible" :title="state.title" @close="close">
    <el-form
      ref="ruleFormRef"
      :model="state.form"
      label="label position"
      label-width="130px"
      :rules="state.rules"
    >
      <el-form-item label="项目主审人账号" :label-width="formLabelWidth">
        <el-input v-model="state.userName" autocomplete="off" @blur="loseBlur" />
      </el-form-item>
    </el-form>
  </el-dialog>

<script setup>
 
// 编辑按钮事件 要放在nextTick里面 赋值的时候
function handleClick(value) {
  state.title = '编辑'
  state.dialogFormVisible = true
  const forms = state.form
  nextTick(() => {
    Object.keys(state.form).forEach((key) => {
      forms[key] = value[key]
      // console.log(forms[key], value);
    })
  })
}


// 弹出窗清空赋值
function close() {
  if (!ruleFormRef.value) return
  ruleFormRef.value.resetFields()
}

</script>