场景

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

那么el-form怎样实现表单重置，如果在多个页面需要用到重置，怎样将此方法抽出为全局的方法，在需要用到的地方直接引用。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

实现重置

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

  <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">

然后在点击重置按钮执行的方法中

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

其中这里的queryForm要和上面的对应。

这种一般用于搜索参数时的重置按钮的操作。

在el-form中要重置的项要添加prop属性

          <el-form-item label="员工名称" prop="xm"><el-inputv-model="queryParams.xm"placeholder="请输入员工名称"clearablesize="small"@keyup.enter.native="handleQuery"/></el-form-item>

除了重置查询参数在点击新增或者编辑按钮后弹出页面后点击取消按钮时也要实现重置操作。

在点击取消按钮对应的事件中

    reset() {this.form = {id: undefined,bcbh: undefined,};this.$refs["form" ].resetFields();},

首先将此form通过

<el-form ref="form" :model="form" :rules="rules" label-width= "100px">

绑定的表单的model下的要清空的所有的输入框对应的prop的属性设置为undefined,

然后再执行重置的操作。

将重置方法抽出为全局方法

首先在main.js中挂载一个全局方法

Vue.prototype.resetForm = resetForm

赋值为从第三方js中引入的resetForm方法。其中badao.js用来存放一些通用的工具类方法。

import {  resetForm } from "@/utils/badao";

在引入来源的badao.js中

// 表单重置
export function resetForm(refName) {if (this.$refs[refName]) {this.$refs[refName].resetFields();}
}

将此方法进行暴露。

接受的参数为要重置的表单的ref属性的值。

那么在进行重置查询参数时

    resetQuery() {this.resetForm("queryForm");},

在取消时重置表单

    reset() {this.form = {id: undefined,bcbh: undefined,};this.resetForm("queryForm");},

ElementUI中el-form实现表单重置以及将方法抽出为全局方法相关推荐

Java入力项目无法设定到form_html中关于form与表单提交操作的资料集合
原标题:html中关于form与表单提交操作的资料集合这里我们介绍一下form元素与表单提交方面的知识. form元素 form元素的DOM接口是HTMLFormElement,继承自HTMLEle ...
element-ui中的表格与表单混用方法及表单校验
效果图只是简单写一个样式和使用方法,剩下的可以按照自己所学的知识进行扩展! <template><div><el-container><el-header& ...
elementUI form表单重置问题
elementUI form表单重置问题问题如果修改了data里的表单form默认值,那么重置以后就是你修改以后的值,而不是data里的值了所以this.$refs.ruleForm.resetF ...
ElementUI实现el-form表单重置功能按钮
目录业务场景: 效果演示: 业务场景: 使用el-form时,点击重置按钮或者取消按钮时会实现表单重置效果. 重置功能按钮功能实现详细步骤: 第一:首先给el-form添加ref属性. <el ...
ElementUI 之el-form表单重置功能按钮
业务场景: 使用el-form时,点击重置按钮或者取消按钮时会实现表单重置效果. 重置功能按钮功能实现详细步骤: 第一:首先给el-form添加ref属性. <el-form :inline=& ...
【HTML】form表单重置、清空方法记录
form表单重置.清空方法记录 myform 是 form 的 id 属性值调用 reset()方法 function fomrReset() {document.getElementById(&q ...
Struts2中UI标签之表单标签介绍
1.在Struts2中UI标签的表单标签分为两种:form标签本身和单个表单标签. 2.Struts2表单标签包括:form.textfield.password.radio.checkbox.che ...
HTML中的表格和表单控件详解
文章目录前言表格和表单控件的作用? 一.表格控件的语法 1.tr标签和td标签 2.表格的属性二.表单控件的用法 1.创建表单 2.表单的常用属性 3.表单常用控件(input控件) 4.文本域 ...
activiti表单设计器_基于Vue,ElementUI开发的一款表单设计器
介绍基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来工具地址: http://tools.xiaoyaoji.cn/form Gi ...

ElementUI中el-form实现表单重置以及将方法抽出为全局方法

场景

实现

实现重置

将重置方法抽出为全局方法

ElementUI中el-form实现表单重置以及将方法抽出为全局方法相关推荐

最新文章

热门文章