vue实现在进行增删改操作后刷新页面

问题

通常在后台管理项目中，对数据进行增删改查是常规操作。在进行这些操作后，需要手动刷新才能更新列表。本文主要讨论进行增删改查相关操作后如何使当前页面显示操作后的最新数据。

解决方案 || 以删除为例：

1.强制刷新：this.$forceUpdate()

2.使用window.reload( ) 或 router.go(0)，但会使整个浏览器进行重载，页面闪烁。

3.重新调用接口:但性能较差，代码冗长。

4.provide / inject ：（推荐）

点此查看VUE官方解释：

允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

首先在App.vue全局设置provide

在需要刷新的操作页面内注入inject：[‘reload']

在调用接口操作成功后 this.reload( )

比如在删除接口调用成功后：

划重点

provide：一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject：一个字符串数组，或一个对象，对象的 key 是本地的绑定名。

$nextTick（点击查看vue相关文档）

除此之外，provide和inject的用法主要是：在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。

需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

补充知识：vue主动刷新页面及列表数据删除后的刷新方法

1.场景

在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

2.遇到的问题

1. 用vue-router重新路由到当前页面，页面是不进行刷新的

2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好

3.解决方法

provide / inject 组合

作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

App.vue:

声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载

tableList.vue:

在页面注入App.vue组件提供（provide）的 reload 依赖，在逻辑完成之后（删除或添加...）,直接this.reload()调用，即可刷新当前页面。

4.provide / inject 用法

provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject：一个字符串数组，或一个对象，对象的 key 是本地的绑定名

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

深入理解数据驱动

以上算是开发过程中的一个坑，用了一段时间，今天再读代码的时候，感觉被坑的很严重。

1. 获取列表方法

2.重新获取数据

3.这样再次调用获取数据，即可同步实现页面数据更新（不会重新刷新页面），同时保证有分页时，能够停留在当前页（刷新前如果是第二页，刷新后依然在第二页），

即其他查询条件保持不变，体验效果好！

以上这篇vue实现在进行增删改操作后刷新页面就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Element-ui el-tree新增和删除节点后如何刷新tree的实例

    一, 当新增节点后刷新当前节点 node.loaded = false; node.expand(); //新建子节点是刷新一次本节点的展开请求,而重命名和删除则需要刷新父级节点的的展开事件, 二, 删除节点 node.parent.loaded = false node.parent.expand() 完毕~ 补充知识:element-ui组件el-tree添加按钮管用,删除按钮,数据会变,但是页面不更新 可能是element-ui 的版本太低了 我用的element-ui 2.4.6 后来发

  • Element-ui tree组件自定义节点使用方法代码详解

    工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~ <template> <div class="sortDiv"> <el-tree :data="sortData" draggable node-key="id" ref="sortTree" default-expand-all :expand-

  • ElementUI中el-tree节点的操作的实现

    其实tree的有些方法用起来是很方便的, this.$refs.tree.getCheckedKeys():这个原生态的方法.官方文档上说的是,返回一个数组.有了这个方法,我们就可以得到选中的每个节点的id,拿到了id,那所有的问题就迎刃而解了. 废话不多说,直接上代码 html <div id="app"> <el-row> <el-button @click="checkedKeys">得到节点id</el-button

  • Vuex实现数据增加和删除功能

    首先,我们要安装vuex,执行命令yarn add vuex 1.编写state数据 //vuex/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const state = { bookList: [ {id: 1, name: '西游记'},{id: 2, name: '水浒传'}, {id: 3, name: '红楼梦'},{id: 4, name: '三国演义'} ] } export def

  • 详解vue-element Tree树形控件填坑路

    通过tree树形控件的default-checked-keys属性来设置默认选中的节点 html.vue <el-form-item label="角色权限:"> <el-tree :data="data2" show-checkbox node-key="id" @check="handleNodeClick" :default-expanded-keys="[]" ref="

  • vue实现在进行增删改操作后刷新页面

    问题 通常在后台管理项目中,对数据进行增删改查是常规操作.在进行这些操作后,需要手动刷新才能更新列表.本文主要讨论进行增删改查相关操作后如何使当前页面显示操作后的最新数据. 解决方案 || 以删除为例: 1.强制刷新:this.$forceUpdate() 2.使用window.reload( ) 或 router.go(0),但会使整个浏览器进行重载,页面闪烁. 3.重新调用接口:但性能较差,代码冗长. 4.provide / inject :(推荐) 点此查看VUE官方解释: 允许一个祖先组

  • Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作

    需求: vue-cli项目树形控件:一级节点为本地节点,默认展开一级节点,增删改后局部刷新数据. 增加节点,点击确定后局部刷新,渲染新数据. 源码 element组件样式 <el-tree class="treeitems" :data="data" node-key="id" :props="defaultProps" :load="loadNode" lazy :default-expanded-

  • vue实现树形结构增删改查的示例代码

    vue实现树形结构增删改查的示例代码

    其实很多公司都会有类似于用户权限树的增删改查功能,正好最近我刚写了一个树形结构的增删改,在这里和大家分享一下,如果有不合理的地方欢迎评论,我会尽快优化~~ 先附上一下效果图 这个是没有点击编辑时,产品的需求是选中某个节点,取得该节点对应的设备数据,所以初始页面是下面这个样子的. 这个是点击了编辑之后,显示节点的编辑按钮 点击最上面的添加按钮,显示最外层父节点的添加画面 修改节点名称 因为我们的需求是编辑与非编辑两种状态,所以我用了两个树形组件,通过v-if进行控制.(v-if:该组件不存在,v-

  • Yii2实现增删改查后留在当前页的方法详解

    Yii2实现增删改查后留在当前页的方法详解

    前言 实现增删改查操作成功后仍留在当前页,能给用户一个良好的体验.但是 Yii2 框架本身是没有在增删改查操作成功后仍留在当前页的效果的,要实现这样的一个效果得自己写.我的原则是不动核心代码,始终坚持自己的原则,现实现了我把它分享出来.殊途同归,如有更好的实现方法,欢迎交流. 需求分析 一.实现增删改查后操作成功后仍然留在当前页面. 1.链接的效果图 封装代码 共有两个文件ActionColumn.php和Helper.php1.ActionColumn.php文件 <?php use Clos

  • React Ant Design树形表格的复杂增删改操作

    最近因为业务接触了antd,使用antd完成一个复杂的树形表格的显示以及修改.在这其中遇见了不少坑,很多功能antd只写了初步的功能,更为细化的功能只能自己完善.踩过的坑都写在了这里. 树形表格的显示 在antd中对于表格的key值有着严格的控制,每一个row都必须有一个独一无二的key值,可以是数字也可以是字符串.这一点和我曾经使用过得iview有着很大的区别.react使用key来代表每一行是为了避免重新渲染的问题,这个优化也在实际的开发中带来了不少的问题.比如新建行时需要自定义新key.

  • Vue使用Element实现增删改查+打包的步骤

    在我们进行项目开发期间,避免不了使用各式各样的组件,Element是由饿了么公司前端团队开源.样式精美.组件齐全.易于上手. 效果: 组件使用 我们利用vue-cli创建一个项目,然后只需要安装element-ui即可 安装:npm i element-ui -S 然后在main.js中引用一下样式即可,可以选择按需加载,我们这边因为是演示一下,所以不去进行调整,项目中如果使用到的组件不多,可以选择按需加载. main.js import Vue from 'vue'; import App f

  • Jquery easyui开启行编辑模式增删改操作

    Jquery easyui开启行编辑模式增删改操作

    jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点. easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 easyui,您不需要写太多 javascript 代码,一般情况下您只需要使用一些 html 标记来定义用户界面. HTML 网页的完整框架. easyui 节省了开发产品的时间和规模. easyui 非常简单,但是功能非常强大. 先给大家展示效果图:

  • javascript实现表格增删改操作实例详解

    本文实例讲述了javascript实现表格增删改操作的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

  • 详解mysql数据库增删改操作

    插入数据 insert into 表名(列名1,列名2,列名3) values(值1,值2,值3); insert into user(user_id,name,age) values(1,'nice',24); 简单写法可以省去字段名,但是要插入全部字段. 批量插入 单条插入和批量插入的效率问题 mysql多条数据插入效率大于单条数据插入 删除记录 delete from 表名 [where 条件] 如果没有指定条件,会将表中数据一条一条全部删除掉. delete删除数据和truncate删除

  • vue form 表单提交后刷新页面的方法

    最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中 定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数据 this.$http.get("/permit/specific", { params: { page: this.localPage, size: this.msg.pagNumber, } }, {emulateJSON: true} ).then((response) =>

随机推荐