Vue3 element-plus reset重置表单

在Vue3中，可以使用Ref来绑定表单的值，并根据需要进行重置。而element-plus的表单可以使用el-form和el-form-item来创建。

以下是一个示例，展示了如何使用element-plus和Vue3重置表单：

<template>
  <el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
    <el-form-item label="Name" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="Email" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="resetForm">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const formRef = ref(null);
    const form = ref({
      name: "",
      email: "",
    });
    const rules = ref({
      name: [{ required: true, message: "Please enter name" }],
      email: [{ required: true, message: "Please enter email" }],
    });

    const resetForm = () => {
      form.value = {
        name: "",
        email: "",
      };
      formRef.value.resetFields();
    };

    return {
      form,
      rules,
      formRef,
      resetForm,
    };
  },
};
</script>

在上述示例代码中，我们使用了ref来创建了一个名为form的Ref对象，用于绑定表单的值。然后在resetForm方法中，我们重置了form对象的值，并使用formRef对象的resetFields方法来重置表单的验证状态。最后，通过点击"Reset"按钮调用resetForm方法来触发重置操作。