vue 重置按钮功能实现

重置按钮功能：

按钮代码：

<Form :model="queryParams" ref="queryForm" :label-width="labelWidth" :label-position="labelPosition">
<Row :gutter="24" type="flex" justify="end"><Col v-bind="grid"><FormItem label="用户名称："><Input v-model="queryParams.userName" maxlength="11" placeholder="请输入用户名"/></FormItem></Col><Col v-bind="grid" class="ivu-text-right"><FormItem><Button type="primary" @click="handleQuery">查询</Button><Button class="ivu-ml-8" @click="resetQuery">重置</Button></FormItem></Col>
</Row>
</Form>

图示：

1.初始化查询数据：

2.图示方法：

重点就是这句：（意思是将初始状态的data复制到当前状态的data,实现重置效果）

  Object.assign(this.$data, this.$options.data());

以上是简单的重置按钮功能；

以下是在有下拉菜单Dropdown 的情况下使用重置按钮就是另一种写法：

图示：

这里默认选择了年级和班级，用第一种方法，点击重置按钮，会将下拉菜单从默认状态选择变成需要选择的状态

重置按钮功能(有下拉菜单情况下适用)：

1.初始化查询数据：（同上）

2.图示方法：

讲解：

重点1：在created钩子深拷贝了一份数据模板：

this.defaultUserFormSearch = JSON.parse(JSON.stringify(this.queryParams));

重点2：在重置按钮事件触发后，再将备份的数据this.defaultUserFormSearch赋给this.queryParams：

this.queryParams = JSON.parse(JSON.stringify(this.defaultUserFormSearch));

完成！这样重置按钮就不会重置下拉菜单了✌

vue 重置按钮功能实现相关推荐

java重置按钮功能函数_Bootstrap按钮功能之查询按钮和重置按钮
Bootstrap按钮功能之查询按钮和重置按钮 1.问题背景一般情况下,查询列表有查询条件.查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据:点击重置按钮会将查询条件恢复到原始状态 2. ...
php重置按钮,Bootstrap按钮功能之查询按钮和重置按钮
Bootstrap按钮功能之查询按钮和重置按钮 1.问题背景一般情况下,查询列表有查询条件.查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据:点击重置按钮会将查询条件恢复到原始状态 2. ...
BeagleBone硬件概览Ethernet端口板载LEDc重置按钮等介绍
BeagleBone硬件概览Ethernet端口板载LEDc重置按钮等介绍两种型号的BeagleBone BeagleBone有两种型号,较早的的型号为Beaglebone,最新的型号为Beagle ...
VUE图片裁剪功能vue-img-cutter
VUE图片裁剪功能vue-img-cutter 前言: 演示地址兼容IE9+,MSEdge,Chrome,Firefox 两种展现形式,行内或弹窗可旋转.缩放图片任意比例.大小裁剪固定比例.大 ...
SharePoint重置密码功能Demo
博客地址 http://blog.csdn.net/foxdave 本文将说明一个简单的重置SharePoint用户密码(NTLM Windows认证)的功能如何实现重置密码功能,实际上就是重置域用 ...
前端模板-2【vue部分小功能、bug处理】
前端模板[vue部分小功能] 1 Vue部分模板 1.1 vue实现store[存储当前选中页面] 我的习惯用法,大家可自行调整[以存储当前页面名称为例] ①在src下新建文件夹store,并创建co ...
前端vue实现分页功能
前端Vue实现分页功能我们都知道在spring boot项目中安装pagehelper可以实现分页功能,但是在vue中也能在前端实现分页. 1. 首先,在data中定义以下变量: data() {r ...
html计算器重置按钮,在Windows 10中重置和重新安装计算器 | MOS86
Windows 10中的新计算器应用程序运行了一个干净的用户界面,并且在触摸设备上也很出色. 除了默认启动计算器应用程序默认设置的标准模式之外,还可以在Calculator应用程序中使用程序员和科学模 ...
vue antvG6 多功能tree图树图树结构
vue antvG6 多功能tree图树图树结构效果展示代码环境 tree图页代码效果展示 antvg6 树结构效果图 antvg6 tree图搜索节点 antvg6 tree图显示时间,状态 ...

vue 重置按钮功能实现

vue 重置按钮功能实现相关推荐

最新文章

热门文章