vue3 antd项目实战——Form表单的重置【使用resetFields()重置form表单数据、清空输入框】

<template>
  <a-form
    ref="formRef"
    :model="formState"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item label="用户名" name="username">
      <a-input v-model:value="formState.username" />
    </a-form-item>
    <a-form-item label="密码" name="password">
      <a-input-password v-model:value="formState.password" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="onReset">重置</a-button>
    </a-form-item>
  </a-form>
</template>
 
<script setup>
import { reactive } from 'vue';
import { Form, Input, Button } from 'ant-design-vue';
 
const formRef = ref(null);
const formState = reactive({
  username: '',
  password: '',
});
 
const onFinish = (values) => {
  console.log('Submit: ', values);
};
 
const onFinishFailed = (errorInfo) => {
  console.log('Failed: ', errorInfo);
};
 
const onReset = () => {
  formRef.value.resetFields();
};
</script>

在这个代码实例中，我们使用了Ant Design Vue库中的Form组件和Input组件，并通过reactive来创建响应式的表单数据对象formState。我们还定义了formRef来引用Form组件实例，并通过@click事件处理函数调用onReset方法，该方法通过formRef.value.resetFields()来重置表单字段，将其恢复到初始化状态。这样，当用户点击重置按钮时，表单中的输入字段会被清空。