element ui 清空表单数据

最新推荐文章于 2025-04-22 14:34:42 发布

吃不胖爹

最新推荐文章于 2025-04-22 14:34:42 发布

阅读量5.7k

点赞数 3

CC 4.0 BY-SA版权

文章标签： ui

本文链接：https://blog.csdn.net/qq_43894292/article/details/121144328

本文介绍如何使用 Element UI 的表单组件实现表单的重置功能，包括为表单添加 ref 属性、为每个 form-item 添加 prop 属性、绑定点击事件并调用 resetFields 方法等步骤。

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

1、举例组件代码``

 <el-form ref="searchForm" :inline="true" :model="form" label-width="80px">
     <!--prop属性添加到form-item上,需要和绑定数据的最后名称一致-->
     <el-form-item label="名称:" prop="name">
     	<el-input v-model="form.name" placeholder="请输入内容"></el-input>
 	 </el-form-item>
     <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="resetForm('searchForm')">重置</el-button>
      </el-form-item>
 </el-form>

2、表单加ref属性：ref="searchForm"

<el-form ref="searchForm" :inline="true" :model="form" label-width="80px">

3、form的每个item加prop属性，否则无法清空,elementUI官方文档中也有说明

<el-form-item label="名称:" prop="name">
     <el-input v-model="form.name" placeholder="请输入内容"></el-input>
 </el-form-item>

4、绑定点击事件中传入"searchForm"

<el-form-item>
  <el-button @click="resetForm('searchForm')">重置</el-button>
</el-form-item>

5、注册事件

resetForm(searchForm) {
    this.$refs[searchForm].resetFields()//重置表单数据
}