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 重置按钮功能实现》对你有帮助，请点赞、收藏，并留下你的观点哦！