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


Posted in Javascript onJuly 21, 2021

业务场景:

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

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

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

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

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

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

效果演示:

默认展示页:

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

检索效果页:

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

重置效果页:

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

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>

到此这篇关于ElementUI实现el-form表单重置功能按钮的文章就介绍到这了,更多相关Element el-form表单重置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
vue项目多环境配置(.env)的实现
Node与Python 双向通信的实现代码
Jul 16 #Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 #Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 #Javascript
html5 录制mp3音频支持采样率和比特率设置
js基础语法与maven项目配置教程案例
JavaScript与JQuery框架基础入门教程
Jul 15 #Javascript
You might like
php过滤危险html代码
2008/08/18 PHP
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
利用php输出不同的心形图案
2016/04/22 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
javascript函数库-集合框架
2007/04/27 Javascript
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
js 数组操作代码集锦
2009/04/28 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
Python中实现的RC4算法
2015/02/14 Python
python计算两个数的百分比方法
2018/06/29 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
python之消除前缀重命名的方法
2018/10/21 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
春节联欢晚会主持词
2014/03/24 职场文书
导师评语大全
2014/04/26 职场文书
社区两委对照检查材料
2014/08/23 职场文书
护士个人年终总结
2015/02/13 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL