重置按钮功能 ：

按钮代码：

<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 v-bind="grid" class="ivu-text-right">
    <FormItem>
      <Button type="primary" @click="handleQuery">查询</Button>
      <Button class="ivu-ml-8" @click="resetQuery">重置</Button>
    </FormItem>
</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));

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

强制重新生成 DOM 的 实现 原理：强制重新生成 DOM 可以通过 Vue 中的 key 来 实现 。在 Vue 更新 Dom 时，如果 key 值相同则会对原有组件进行复用，如果不同，则会重新生成。 代码示例： 每次点击 refresh 按钮 ，Demo 组件都会重新生成 * Demo. vue [removed] export default { data () { 一、 功能 效果描述 由于数据量较大，每时每分都会产生数据，当前列表只展示进入页面的最新数据。其中的查询和 重置 功能 都是基于当前数据的，所以要求不调接口，只是 前端 的查询并展示。但是点击刷新 按钮 ，会调接口，请求到最近的数据，此时列. 就能找到这个 ref，然 ref 自己有一个 resetFields() 函数，它的执行可以清空 ref 所在的这个 el-form 中的表单数据，依据 el-form-item 的 prop 来清空，这个 prop 需要和 v-model 相匹配。具体可以看下下放代码，点击「 重置 」btn 触发 resetForm() 函数。 重置 btn 的作用是为了清空前面 form 表单中的数据。我们使用 elementUI + vue 来做。我们在 el-form 组件中加上。页面上可能会有「搜索」 按钮 。 最后点击 重置 按钮 后的效果类似如下所示：1. vue 重置 按钮 功能 实现 2. vue 之ele中的table组件（复选框的回显和 重置 ）3. 4-2- vue 框架-第三方ui组件elementui- vue - element-ui table复选框翻页记忆与清除 1.`prop="username"`是为了data中rules的username属性做绑定 2. 实现 验证规则的几个要点: 三.登录 按钮 和 重置 按钮 的 功能 实现 ,登录 按钮 的验证逻辑 效果:登陆成功后跳转到home页 1.调用refs的resetFiel 需求：点击 重置 按钮 ， 重置 登陆表单 1.在表单中引入ref="loginFormRef"属性，loginFormRef值可以自定义； 2.给 重置 按钮 绑定点击事件：@click="resetLoginForm"； 3. 实现 点击事件触发的方法，得到引入的属性值对象，调用resetFields方法，即：this.$refs.loginFormRef.resetFields() 代码如下： 第一次点击成功 实现 ，测试时发现，第二次就无效了，思考了一下发现，对象是引用数据类型，那么一旦改变，堆内存地址中的数据都会改变，这样就不是固定存储了，只能 实现 一次 重置 。最近接到个编辑页面的需求， 重置 按钮 需要 实现 点击之后恢复表单展示的页面，最开始的思路是：将赋值一个新对象，然后点击 重置 按钮 ，让新对象的值替换到老数据。解决方式：因为数据结构简单，使用浅拷贝即可。 ② API 提供了一个 重置 方法resetFields。表单 重置 的原理是，只要获取了表单的实例对象，就可以通过实例对象，直接访问resetFields 这个函数。从而 实现 对表单的 重置 。 ③ 那么，接下来。思路有了，只需要拿到表单实例对象，通过实例对象调用resetFields 就能够 实现 重... 1. 项目初始化 ① 安装 Vue 脚手架 npm install -g @ vue /cli ② 通过 Vue 脚手架创建项目：在cmd命令行中输入 vue ui，使用图形化界面创建项目 ③配置 Vue 路由，配置Elment-UI组件库，配置axios库：通过添加插件和依赖安装以上配置 2. 后台项目的环境配置 ① 安装mysql数据库 ② 安装Node.js环境 ③ 配置... 在使用 vue +element 开发 Dialog 对话框的时候，点击一个 按钮 后，显示对话框，对话框填写数据使用下拉菜单展示并选择内容后，关闭模态框；再次打开对话框仍显示上次选中的数据分析原因