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代码
May 09 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 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
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
Javascript 面向对象 重载
2010/05/13 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
python视频按帧截取图片工具
2019/07/23 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
机械专业应届生求职信
2013/12/12 职场文书
竞争上岗演讲稿
2014/01/05 职场文书
写给保洁员表扬信
2014/01/08 职场文书
syb养殖创业计划书
2014/01/09 职场文书
社区矫正工作方案
2014/06/04 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
音乐研修感悟
2015/11/18 职场文书
反邪教学习心得体会
2016/01/15 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL