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全排列的六种算法 具体实现
Jun 29 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
jqTransform美化表单
Oct 10 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
浅谈React高阶组件
Mar 28 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
在JavaScript中如何使用宏详解
May 06 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
python:接口间数据传递与调用方法
2018/12/17 Python
Flask配置Cors跨域的实现
2019/07/12 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
python框架django项目部署相关知识详解
2019/11/04 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
印度民族服装购物网站:BIBA
2019/08/05 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
质检的岗位职责
2013/11/17 职场文书
杠杆的科学教学反思
2014/01/10 职场文书
高一地理教学反思
2014/01/18 职场文书
花店创业计划书范文
2014/02/07 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
手机销售员岗位职责
2015/04/11 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫
oracle数据库去除重复数据
2022/05/20 Oracle