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 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
一个JavaScript获取元素当前高度的实例
Oct 29 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 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
php4的彩蛋
2006/10/09 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
php自动加载机制的深入分析
2013/06/08 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
简单解析Django框架中的表单验证
2015/07/17 Python
python实现在线翻译功能
2020/03/03 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
我们的节日清明节活动方案
2014/03/05 职场文书
冬季安全检查方案
2014/05/23 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
工程索赔意向书
2014/08/30 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
婚礼答谢词
2015/01/04 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL