Element Plus中表单resetFields()重置失效

问题

我在使用element plus时，发现from组件的表单重置没有生效，如下代码所示

el-form
  :model="formLabelAlign"
  ref="ruleFormRef"
>
  <el-form-item label="账号" >
    <el-input  v-model="formLabelAlign.username" />
  </el-form-item>

  <el-form-item label="密码"  >
    <el-input type="password" v-model="formLabelAlign.password" />
  </el-form-item>

  <div class="buttons">
    <el-button type="primary" @click="onSubmit">登录</el-button>
    <el-button @click="cancel(ruleFormRef)">取消</el-button>
  </div>

 </el-form>
 
<script setup>
  import {reactive,ref} from "vue"
  //表单数据
  const formLabelAlign = reactive({
    username: '',
    password: ''
  })
  //获取表单元素
  const ruleFormRef = ref()
  
  //重置操作
  const cancel = (form) => {
      form.resetFields()
  }
  
</script>

上面代码，我们知道表单的数据是formLabelAlign,当点击重置按钮，数据重置没生效。我个人总结如下结论

1.el-form-item未添加prop属性

2.el-form-item添加了prop属性，但prop属性的值没有和表单数据对应

3.ref获取表单元素错误

最终解决方案（思路）

1. 先拿到表单标签，通过ref

2. 点击重置后，通过直接操作表单对象的resetFields()方法完成重置

    el-form
      :model="formLabelAlign"
      ref="ruleFormRef"
    >
      <el-form-item label="账号" prop='username' >
        <el-input  v-model="formLabelAlign.username" />
      </el-form-item>
   
      <el-form-item label="密码" prop='password' >
        <el-input type="password" v-model="formLabelAlign.password" />
      </el-form-item>
   
      <div class="buttons">
        <el-button type="primary" @click="onSubmit">登录</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
   
     </el-form>
   
    <script setup>
      import {reactive,ref} from "vue"
      //表单数据
      const formLabelAlign = reactive({
        username: '',
        password: ''
      })
      //获取表单元素
      const ruleFormRef = ref()
   
      //重置操作
      const cancel = () => {
          ruleFormRef.value.resetFields()
      }
   
    </script>
   

结语

如果我的文章对你有帮助，希望你高抬贵手，点个赞再走也不迟，你的支持就是我的最大动力。如果感觉有问题，欢迎线上给我一拳。