vue + element 树形表 懒加载 添加、编辑、删除时 刷新节点
先上效果图:

前言:element 树形表在懒加载模式下官方没有提供实时局部刷新节点的方法,在网上看了好多博客也没有比较好的办法
我能想到最直接的办法就是读源码了,在差不多三小时的源码浏览后终于在tree.js中找到懒加载关键的一个方法:

element 在每次更新节点时都调用了该方法,其中的load方法就是我们绑定的懒加载方法;最终发现它实现节点更新的关键在于:

于是写一个更新某个节点的子节点的方法: 在增加和删除后更新该节点的父节点(调用以上方法)即可

关键代码其实就是两步:
第一步:定义懒加载树表的ref属性 ref = "table"
第二步:重新加载,增加和删除后更新该节点的父节点 如下:
this.$set(this$.refs.table.store.states.lazyTreeNodeMap,id,res.data)
// id为该节点的父节点id即为要刷新节点的id res.data为要刷新节点的数据
vue + element 树形表 懒加载 添加、编辑、删除时 刷新节点的更多相关文章
- Vue实现一个图片懒加载插件(转载)
Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...
- vue实现menu菜单懒加载
本文将在vue+element ui项目中简单实现menu菜单的懒加载. 最近接到这样的需求:菜单的选项不要固定的,而是下一级菜单选项需要根据上级菜单调接口来获取.what? 这不就是懒加载吗?翻了一 ...
- vue + vue-lazyload 实现图片懒加载
1.安装 npm i vue-lazyload -S 2.配置 main.js /***图片模板等懒加载 start ***/ import VueLazyload from 'vue-lazyloa ...
- vue.js 二 路由懒加载
当项目小的时候,我没考虑要去找这个得解决方案,也幸好现在几乎能迁移的项目都整合在了一个vue的项目里面 才发现编译后的vendor.js变得异常的大,而且几乎在项目每一个页面都需要加载这一个js,项目 ...
- element table组件懒加载
directives : { loadmore : { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body ...
- Vue图片懒加载之lazyload插件使用
当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用 一. vue lazyload插件: 插件地址:https://github.c ...
- VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)
在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...
- VUE项目性能优化实践——通过懒加载提升页面响应速度
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我 ...
- 在webpack中使用Code Splitting--代码分割来实现vue中的懒加载
当Vue应用程序越来越大,使用Webpack的代码分割来懒加载组件,路由或者Vuex模块, 只有在需要时候才加载代码. 我们可以在Vue应用程序中在三个不同层级应用懒加载和代码分割: 组件,也称为异步 ...
- VUE图片懒加载-vue lazyload插件的简单使用
序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件: 插件地址:http ...
随机推荐
- 《Nginx核心技术》第01章:安装Nginx
作者:冰河 星球:http://m6z.cn/6aeFbs 博客:https://binghe.gitcode.host 文章汇总:https://binghe.gitcode.host/md/all ...
- J积分
J积分是断裂力学中表征裂纹尖端能量场的路径无关积分,具有两个核心功能: 积分路径为从裂纹下表面上任意一点出发,沿任一路径绕过裂纹尖端,最后终止于裂纹上表面的任意一点. J积分具有守恒性(与路径无关). ...
- k8s service访问偶发超时问题
问题现象 在某个集群节点上的服务访问service服务:端口,会出现偶发timeout的问题,集群有的节点不会出现访问timeout的问题 问题处理 查看bridge-nf-call-iptables ...
- 今天遇到了 X-Y PROBLEM
什么是X-Y 问题呢? 以下参考来自于耗子叔博客: 想解决问题X 他觉得Y可能是解决X的方法 但是他不知道Y应该怎么做 于是他去问别人Y应该怎么做? X-Y Problem 最大的严重问题就是:在一个 ...
- 鸿蒙HarmonyOS基础语法-循环-类型转化-事件
变量命名规则 1,只能包含数字.字母.下划线.$,不能以数字开头(4种类型) 2,不能使用内置关键字或保留字(比如 let.const) 3,严格区分大小写 声明方式 变量字符串,数字,布尔(与TS一 ...
- Vue.js作者谈:Vue 3 最新进展_VueConf 2018
本文只是针对视频内容的重点整理,如若不清楚的地方请看文末链接的现场视频内容. Vue3.0会带来些什么: 更快 更小 更易于维护 更好的多端渲染支持 其他新功能 更快: 重构虚拟DOM:更多虚拟时的优 ...
- [书籍精读]《React进阶之路》精读笔记分享
写在前面 书籍介绍:<React进阶之路>详细介绍了React技术栈涉及的主要技术.本书分为基础篇.进阶篇和实战篇三部分.基础篇主要介绍React的基本用法,包括React 16的新特性: ...
- HyperWorks基于几何投影的网格变形
在Altair(HyperWorks)里,使用本节将演示如何通过 line difference 功能,将已有网格以几何图形为目标进行投影,以生成全新的网格模型. 图 7-5 网格变形模型的状态 St ...
- 9-2 MySQL 分析查询语句:EXPLAIN(详细说明)
9-2 MySQL 分析查询语句:EXPLAIN(详细说明) @ 目录 9-2 MySQL 分析查询语句:EXPLAIN(详细说明) 1. EXPLAIN 概述 2. EXPLAIN 基本语法 3. ...
- MySQL快速安装
1.下载地址(mysql5.7) https://downloads.mysql.com/archives/community/ 2.my.cnf 查看代码 #default-character-se ...