ElementUI 之el-form表单重置功能按钮

忘是亡心i 2023-10-10 13:07 16阅读 0赞

业务场景：

使用el-form时，点击重置按钮或者取消按钮时会实现表单重置效果。

重置功能按钮功能实现详细步骤:

第一:首先给el-form添加ref属性。

<el-form :inline="true" :model="queryParams" ref="queryForm">

第二：在点击重置按钮执行的方法中，执行如下功能代码片段

reset(){
            # 重新设置请求参数实体属性
            this.queryParams = {
              memberName: undefined,
              typeId: undefined,
            };
            # 指定表单属性值重置
            this.$refs["form" ].resetFields();
          }

效果演示:

默认展示页:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70][]

检索效果页:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 1][]

重置效果页:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 2][]

Vue页面源码:

<style>
    </style>
    <template>
      <div>
        <el-col :span="19">
          <el-form :inline="true" :model="queryParams" ref="queryForm">
            <el-form-item label="姓名">
              <el-input v-model="queryParams.memberName"  placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item >
              <div style="text-align:right">
                
                <el-button type="primary" @click="searchHandler">查询</el-button>
                
                <el-button type="primary" @click="reset">重置</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
        <p style="text-align: left; margin-bottom: 10px;">
          <el-button type="primary" @click="dialogFormAdd = true">添加</el-button>
        </p>
        <el-row>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              v-for="(data,index) in tableHeader"
              :key="index"
              :prop="data.prop"
              :label="data.label"
              :min-width="data['min-width']"
              :align="data.align">
            </el-table-column>
            <el-table-column
              prop="memberSex"
              label="性别">
              <template slot-scope="scope">{
       { scope.row.memberSex === 1 ? '男' : '女' }}</template>
            </el-table-column>
            <el-table-column
              prop="memberStatic"
              label="会员状态">
              <template slot-scope="scope">{
       { scope.row.memberStatic === 1 ? '正常' : '不正常' }}</template>
            </el-table-column>
            <el-table-column
              label="操作"
              min-width="240">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="toEdit(scope)">修改</el-button>
                <el-button type="danger" size="mini" @click="deleteMember(scope)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <br>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.pageIndex"
            :page-sizes="[5, 10, 20, 30, 40]"
            :page-size=pagination.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=pagination.total>
          </el-pagination>
        </el-row>
    
        <el-dialog title="添加学生" :visible.sync="dialogFormAdd">
          <el-form :model="member">
            <el-form-item label="姓名" >
              <el-input v-model="member.memberName" auto-complete="off"></el-input>
            </el-form-item>
    
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormAdd = false">取 消</el-button>
            <el-button type="primary" @click="add(student)">确 定</el-button>
          </div>
        </el-dialog>
    
        <el-dialog title="修改学生" :visible.sync="dialogFormEdit">
          <el-form :model="member">
            <el-form-item label="姓名" >
              <el-input v-model="member.memberName" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormEdit = false">取 消</el-button>
            <el-button type="primary" @click="edit(student)">确 定</el-button>
          </div>
        </el-dialog>
    
      </div>
    </template>
    
    <script>
      export default{
        name: 'member',
        data () {
          return {
            tableData: [],
            dialogFormEdit: false,
            dialogFormAdd:false,
            member: {
              memberId: '',
              memberName: '',
              memberPhone: '',
              memberAge: '',
              typeName: '',
              nenberDate: '',
              memberStatic:'',
              memberbalance:'',
              memberxufei:''
            },
            queryParams:{
              memberName:'',
              typeId:''
            },
            pagination: {
              pageIndex: 1,
              pageSize: 10,
              total: 0,
            },
            tableHeader: [
              {
                prop: 'memberId',
                label: '会员编号',
                align: 'left'
              },
              {
                prop: 'memberName',
                label: '名称',
                align: 'left'
              },
              {
                prop: 'memberPhone',
                label: '电话',
                align: 'left'
              },
              {
                prop: 'memberAge',
                label: '年龄',
                align: 'left'
              },
              {
                prop: 'membertypes.typeName',
                label: '卡类型',
                align: 'left'
              },
              {
                prop: 'nenberDate',
                label: '录入日期',
                align: 'left'
              },
              {
                prop: 'memberbalance',
                label: '会员余额',
                align: 'left'
              },
              {
                prop: 'memberxufei',
                label: '到期日期',
                align: 'left'
              }
            ]
          }
        },
        methods: {
          init () {
            var self = this
            this.$axios({
              method:'post',
              url:'/menber/query',
              data:{"pageNumber":this.pagination.pageIndex,"pageSize":this.pagination.pageSize,"ktype": 0},
              headers:{
                'Content-Type':'application/json;charset=utf-8'      //改这里就好了
              }
            }).then(res => {
              console.log(res);
              self.pagination.total = res.data.total;
              self.tableData = res.data.rows;
            })
              .catch(function (error) {
                console.log(error)
              })
          },
          handleSizeChange(val) {
            this.pagination.pageSize = val;
            this.pagination.pageIndex = 1;
            this.init();
          },
          handleCurrentChange(val) {
            this.pagination.pageIndex = val;
            this.init();
          },
          add (student) {
            this.$axios({
              method:'post',
              url:'/student/insert',
              data:{'name': student.name, 'sex':student.sex,'age':student.age,'college':student.college,'className':student.className},
              headers:{
                'Content-Type':'application/json;charset=utf-8'      //改这里就好了
              }
            }).then(res => {
              this.$message.success('添加成功')
              this.dialogFormAdd = false
              this.init()
            })
              .catch(function (error) {
                console.log(error)
              })
          },
          toEdit (scope) {
            this.student.sid = scope.row.sid
            this.student.name = scope.row.name
            this.student.sex = scope.row.sex
            this.student.age = scope.row.age
            this.dialogFormEdit = true
          },
          edit (student) {
            var params ={
              'sid' : student.sid,
              'name' : student.name,
              'sex' :  student.sex,
              'age' : student.age
            }
    
            this.$axios({
              method:'post',
              url:'/student/update',
              data:params,
              headers:{
                'Content-Type':'application/json;charset=utf-8'      //改这里就好了
              }
            }).then(res => {
              this.$message.success('修改成功')
              this.dialogFormEdit = false
              this.init()
            }).catch(function (error) {
              console.log(error)
            })
          },
          deleteMember (scope) {
            debugger;
            if (!scope.row.memberId) {
              this.tableData.splice(scope.$index, 1)
            } else {
              this.$confirm('确认是否删除', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
              })
                .then(() => {
                  console.log(scope.row.memberId)
                  this.$axios.get('/menber/delete/' + scope.row.memberId).then(res => {
                    this.$message.success('删除成功')
                    this.init()
                  })
                    .catch(function (error) {
                      console.log(error)
                    })
                })
                .catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  })
                })
            }
          },
          searchHandler() {
            var self = this
            this.$axios({
              method:'post',
              url:'/menber/query',
              data:{"pageNumber":this.pagination.pageIndex,"pageSize":this.pagination.pageSize,"ktype": 0, "hyname":this.queryParams.memberName},
              headers:{
                'Content-Type':'application/json;charset=utf-8'      //改这里就好了
              }
            }).then(res => {
              console.log(res);
              self.pagination.total = res.data.total;
              self.tableData = res.data.rows;
            })
              .catch(function (error) {
                console.log(error)
              })
          },
          reset(){
            this.queryParams = {
              memberName: undefined,
              typeId: undefined,
            };
            this.$refs["form" ].resetFields();
          }
        },
        mounted: function () {
          this.init()
        }
      }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2021071823372084.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210718233750496.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210718233812151.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue + element-ui表单重置 resetFields问题（无法重置表单）

问题： elementui在重置表单时，无法使用`this.$refs['formRefVal'].resetFields()`清空表单数据; elementui ...

怼烎@/ 2024年04月18日 17:05/ 0 赞/ 80 阅读

相关 ElementUI 之el-form表单重置功能按钮

业务场景：使用el-form时，点击重置按钮或者取消按钮时会实现表单重置效果。重置功能按钮功能实现详细步骤: 第一:首先给el-form添加ref属性。 <

忘是亡心i/ 2023年10月10日 13:07/ 0 赞/ 17 阅读

相关 elementUi重置表单某个字段不引起校验

业务中存在级联的表单，所以上级改变之后，下一级就要跟着改变，如果直接使用this.$set()修改的话，会引起表单重新交验，爆出红色的警告: ![027e663b80d044

叁歲伎倆/ 2023年10月07日 20:54/ 0 赞/ 27 阅读

相关 iView 表单重置

在Vue里面，想重置iView的表单，需要在FormItem中指定prop属性，FormItem包含的控件需要双向绑定表单Model对象，同时表单Model对象也要因应控件类型

ゝ一纸荒年。/ 2022年08月30日 11:45/ 0 赞/ 227 阅读

相关 Element 表单重置

Element 表单重置的时候发现，不能把表单绑定的数据重置为空，这是因为我们在给表单赋值的操作其实是在created 进行绑定的，而 Element 的表单重置是重置为mun

亦凉/ 2022年08月29日 10:24/ 0 赞/ 220 阅读

相关表单提交回写页面之后，重置按钮失效

问题描述页面内提供了数据查询功能，查询字段为姓名和手机号，提交查询请求之后，重置按钮失效；但是在查询之前执行重置的话是可行的。如图所示： ![在这里插入图片描述][

谁践踏了优雅/ 2022年04月25日 08:08/ 0 赞/ 277 阅读

相关 elementui resetFields方法重置表单失败

<el-form :inline="true" :model="form" ref="form1" class="form-inline">

阳光穿透心脏的1/2处/ 2022年04月24日 15:32/ 0 赞/ 515 阅读

相关 vue+elementui 对话框取消表单验证重置

最近在写增删改查，在新增的时候要弹出对话框填写form表单信息，发现对话框右上角的小X和右下角的取消不是一个事件，我想在点击它们两个的时候都可以重置表单，最终解决，如下。 v

Myth丶恋晨/ 2022年04月18日 01:21/ 0 赞/ 502 阅读

相关表单重置

由于JQuery中，提交表单是像下面这样的： $('yigeform').reset(); 但是，不幸的是，这样写的话，会有一个让你很郁闷的结果，那就是，表单无法重

向右看齐/ 2022年04月16日 02:10/ 0 赞/ 331 阅读

相关 vue + elementui form resetFields方法无法重置表单

this.$refs\['form'\].resetFields(); 方法无法重置。 1 el-form 组件没有添加 ref 属性 <el-form ref

我会带着你远行/ 2021年11月19日 11:24/ 0 赞/ 395 阅读