vue3 + elementPlus reset重置表单

最新推荐文章于 2025-05-30 10:24:48 发布

原创最新推荐文章于 2025-05-30 10:24:48 发布 · 8.4k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#html

前端进阶专栏收录该内容

12 篇文章

订阅专栏

这篇博客介绍了在Vue.js中如何使用ref和prop属性来管理表单，包括如何为表单字段添加prop属性以实现数据绑定，以及如何通过ref属性引用表单并调用resetFields方法进行重置操作，确保用户输入的数据有效性和页面交互的顺畅性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单需加上ref属性
字段需加上prop属性
在这里插入图片描述

<template>
  <div class="main">
    <el-form ref="resetFormData" :model="formInline">
      <el-form-item label="姓名" prop="customerName">
        <el-input
          v-model="formInline.customerName"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-button type="warning" @click="resetForm">重置</el-button>
    </el-form>
  </div>
</template>
<script>
import { defineComponent, reactive, ref } from "vue";

export default defineComponent({
  setup() {
    const resetFormData = ref(null);
    const formInline = reactive({});
    
    const resetForm = () => {
      resetFormData.value.resetFields();
    };
    return {
      resetForm,
      resetFormData,
      formInline,
    };
  },
});
</script>