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

最新推荐文章于 2024-07-25 21:03:55 发布
最新推荐文章于 2024-07-25 21:03:55 发布
阅读量4.7k 收藏 7
点赞数
文章标签： elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61657405/article/details/126034129
版权

目录

  • 业务场景：
  • 效果演示:

业务场景：

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

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

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

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

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

 reset(){

        # 重新设置请求参数实体属性

        this.queryParams = {

          memberName: undefined,

          typeId: undefined,

        };

        # 指定表单属性值重置

        this.$refs["form" ].resetFields();

      }

效果演示:

默认展示页:

查询页面：

重置页面：

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">

            <!--自定义searchHandler函数-->

            <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>

小白在这里007
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-form-component:一个可以动态生成表单项的form表单组件
05-11
此动态form表单是基于element-ui里的el-form表单基础上进行修改而来，它实现了新增表单项、删除表单项、表单验证和重置表单、表单提交等form表单所拥有的基本功能。 原理分析： 此form表单每一项绑定的值组成一个...
vue实现重置表单信息为空的方法
10-17
而在更复杂的表单场景，尤其是配合使用组件库时，利用组件的内置方法如`resetFields()`可以更高效地完成表单重置。这不仅可以减少代码量，还能提高代码的可读性和可维护性。在实际开发中，根据项目需求和所使用的库...
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
12-28
问题： 使用this.$ref[‘form’] .resetFields()无法重置表单项 原因： 1.没有给表单添加ref属性 2.表单项el-form-item没有添加prop属性，prop属性需要与input框绑定的属性一致 </e
关于vue element-ui form表单重置时遇到的问题 resetFields方法提前执行
m0_72663698的博客
03-29 740
但我使用过这个方法后发现这个方法在我子传父this.$emit操作之前就执行了，这个方法提前把握的表单数据给清空了，导致我的表单数据被清空从而没有传到父组件 ，于是我在网上查阅大量相关文章，也没找到相关的资料，只发现这个问题的出现是执行顺序导致的问题，在下面加了this.$nextTick方法可以暂时解决这个问题，但是感觉并不规范，后来我又找到了一个方法。在做表单提交的时候遇到了个奇怪的问题，我提交表单要把表单的数据传递给父组件，在提交过后有一个重置表单的操作，以下是我一开始用的清空表单的方法。
ElementUI 之el-form表单重置功能按钮
zhouzhiwengang的专栏
07-18 5608
业务场景： 使用el-form时，点击重置按钮或者取消按钮时会实现表单重置效果。 重置功能按钮功能实现详细步骤: 第一:首先给el-form添加ref属性。 <el-form :inline="true" :model="queryParams" ref="queryForm"> 第二：在点击重置按钮执行的方法中，执行如下功能代码片段 reset(){ # 重新设置请求参数实体属性 this.queryParams = {
ElementUI中el-form实现表单重置以及将方法抽出为全局方法
BADAO_LIUMANG_QIZHI的博客
08-31 3253
场景 使用el-form时，点击重置按钮或者取消按钮时会实现表单重置效果。 那么el-form怎样实现表单重置，如果在多个页面需要用到重置，怎样将此方法抽出为全局的方法，在需要用到的地方直接引用。 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 实现重置 首先给el-form添加ref属性。 <el-form :model="queryParams" ref=.
【案例2】elementUI el-form重置表单
meng_csdn_的博客
06-17 656
vue elementUI el-form 表单重置
el-form如何重置表单数据
qq_39594951的博客
08-05 3731
1.在项目中我们经常会遇到el-form重置表单失效,那么我们可以采取另外一种方法 例如: <el-form :model="formLine" ref="formLine"> <el-row v-for="(item,index) in formLine.searchVOList" :key="index"> <el-col :span="18"> <el-form-item :label="
el-form 重置功能
qq_43175672的博客
01-15 928
【代码】el-form 重置功能。
vue：ElementUI使用el-form表单部分字段不能重置问题
彭世瑜的博客
06-30 2141
使用el-form表单的重置方法，发现部分字段不能重置 经过检查，没有写该字段的el-form-item <el-form ref="form" :model="form" label-width="80px"> <!-- 让该字段出现在dom, 隐藏 --> <el-form-item label="活动名称" props="name" v-show="false"> <el-input v-model="form.name"></el-
vue elementUi便利el-form-item配置校验
weixin_43699107的博客
04-13 2336
vue elementUi便利el-form-item配置校验
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
01-21
然后是主要用到了el-form表单有一个清空重置表单数据的事件方法resetField()，在子组件表单弹窗打开的时候清空一下，在关闭子组件表单弹窗的时候还需要调用resetField()去重置表单数据。这样编辑数据之
el-form表单重置resetFields不生效
systemdowm的博客
08-18 1620
前段时间遇到一个问题，当页面刷新之后，第一次先选择了一条数据打开了编辑弹窗，再关闭。之后再打开新增弹窗，原本应该是空的el-form表单还是刚刚打开编辑时的数据，而且我每次在关闭弹窗都会使用this.$refs[formName].resetFields()去重置el-form，所以这是什么情况造成的？
day4 vue2以及ElementUI
最新发布
mrmobi的博客
07-25 494
可能用到的命令行们。
TreeSelect增加可筛选功能
qq_43048011的博客
07-24 878
应用到本地项目 本地tree数据结构
【elementui】记录el-table设置左、右列固定时，加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法
bbt953的博客
07-24 337
记录el-table设置左、右列固定时，加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法
vue3——利用自定义指令实现下拉框分页懒加载
zmy967131的博客
07-24 412
vue3——利用自定义指令实现下拉框分页懒加载
el-table合计行更新问题
weixin_45580774的博客
07-24 493
说明：在使用el-table自带的底部合计功能时，初始界面不会显示合计内容。
elementui中el-form实现判断数据是否改动
05-24
ElementUI中的`el-form`组件可以通过`ref`属性获取到组件的实例，从而可以调用其提供的方法来实现判断数据是否改动。 具体实现步骤如下： 1. 在`el-form`组件上添加`ref`属性，例如`ref="myForm"`。 2. 在需要判断数据是否改动的地方，可以通过`this.$refs.myForm.isDirty()`方法来获取当前表单数据是否发生改变。 3. 如果需要重置表单数据，可以通过`this.$refs.myForm.resetFields()`方法来实现。 示例代码如下： ```html <template> <el-form ref="myForm"> <!-- 表单项 --> </el-form> <el-button @click="submit">提交</el-button> </template> <script> export default { methods: { submit() { if (this.$refs.myForm.isDirty()) { // 数据发生改动，执行提交操作 } else { // 数据未发生改动，不执行提交操作 } } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值