vue+element tree懒加载更新数据的示例代码

使用element tree实现懒加载,更新某一节点的数据

1.tree 懒加载

只需要在el-tree标签上面添加lazy,load属性,load的接收是一个函数。这里贴上官网给出的方法

<el-tree
   :data="treeList"
   ref="tree"
   class="vue-tree"
   lazy
   :load="loadNode"
   :highlight-current="true"
   :node-key="nodeKey"
   @node-click="nodeClick"
   :expand-on-click-node="false"
   :props="defaultProps"
 ></el-tree>

2.load方法使用

// 懒加载获取树形结构
loadNode(node, resolve) {
//调用接口时,我们的需求是第一级传参为0,后面为当前节点的唯一表示id,可以根据需求而定
// node.level为0时,就是tree的第一级
 const spaceParentGuid = node.level === 0 ? 0 : node.data.spaceGuid
 getDeviceLazyTree({ spaceParentGuid }).then(({ data }) => {
   resolve(
     data.data.map(item => {
       return {
         ...item,
         leaf: !item.hasChildren // 此参数用来判断当前节点是否为叶子节点
       }
     })
   )
 })
},

3.leaf的作用

当我们使用的tree懒加载,只会加载到我们请求的那一层级,所以当我们在叶子节点请求时,请求完不会出现数据,这样的体验就不是很好,这个时候就需要借助tree的props里面isLeaf的配置方法了

defaultProps: {
  children: 'children',
  label: 'spaceName',
  isLeaf: 'leaf'
}

加上此字段,就可以清晰的看出哪些节点为叶子节点了

4.我们一旦使用懒加载的方式的话

那我们在对tree接口进行增删改查时,及时刷新数据时,就会造成我们还需要从新获取接口

其实如果我们仔细观察的话,我们会发现已经请求过的节点,我们收起,再次打开是不会请求接口的,这样的话,我们可以这么做

/**
 * 单独刷新节点
 * guid: 当前节点的父级唯一标识节点
 */
refreshTreeNode(guid) {
  let node = this.$refs.tree.getNode(guid)
  if (node) {
    node.loaded = false
    node.expand() // 主动调用展开节点方法,重新查询该节点下的所有子节点
  }
},

Vue Element Ui 树形表懒加载新增、修改、删除等操作后局部数据更新

前言

element 树表懒加载在每次对表格进行修改删除等操作后需要刷新表格数据时都需要重新请求,在逐增展开加载,这样对用户来说不太友好所以我们稍微解决一些

第一步:定义一个Map

用来储存表格懒加载每次展开时所点击的当前行{tree,treeNode,resolve}

data(){
    return{
        maps: new Map(), // 先在你的data内搞一个map用于存储接下来必要的数据
    }
}

第二步:在load方法内使用map

每次点击展开load方法都会返回{tree,treeNode,resolve}, 定义好map后在每一次执行load方法调用接口成功返回数据后将load返回的参数{tree,treeNode,resolve}储存到map中去,用于后续操作中使用

   load(tree, treeNode, resolve) {
      if (treeNode) {
         // 这是我的方法和接口不必照搬只需要将this.maps.set()这一句放到相应位置即可
        selectBom({
          code: tree.code,
          ifMba: this.ifMba,
        }).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
            this.maps.set(tree.code, { tree, treeNode, resolve });
            // 上面这一句是将你每一次展开的节点存到你刚刚在data内定义的map内,其他的不重要
            // tree.code是唯一值
          }
        });
      }
    },

第三步:查询map中对应数据

已经将每次展开load返回的{tree,treeNode,resolve}存储到map中后,我们现在就需要取出来再传给load方法了,调用refreshLoadTree方法时需要给它传一个你所操作节点父节点ID,他会通过这个ID去map中检索出相对应的数据然后再调用load方法传给它以达到局部更新的目的

    refreshLoadTree(pId) {
      // 根据更改节点的父ID取出相应数据
      const { tree, treeNode, resolve } = this.maps.get(pId);

      this.$set(
        // 不要忘记在你的table上写ref
        this.$refs.LoadTable.store.states.lazyTreeNodeMap,
        pId,
        []
      );
      if (tree) {
        // 将取出对应数据再传给load方法
        this.load(tree, treeNode, resolve);
      }
    },

第四步:调用 refreshLoadTree方法

只需要在你修改或删除等操作接口返回成功时调用并传一个操作节点父ID即可实现局部数据更新

//最后只需要在你做修改删除或者其他操作的地方调用即可
//括号内传操作节点的父节点(如果自己拿不到可以在接口成功时让后端返回)
this.refreshLoadTree(res.data.code);

这是基础版本,因为本人项目原因会再次之上改动许多并未附上全部(仅作为记录)

到此这篇关于vue+element tree懒加载更新数据的文章就介绍到这了,更多相关vue element tree懒加载内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue+elementUI组件tree如何实现单选加条件禁用

    目录 vue+elementUI组件tree单选加条件禁用 使用如上方法就可以完成实现单选 完结!付上一个完成的代码- vue+elementUI组件tree单选加条件禁用 elementUI tree:http://element.eleme.io/#/zh-CN/component/tree 官方给出的API还是挺全的,但是示例木有给全,有几个API的说明也不是很能理解- tree实现带选择框的要加上node-key="id" show-checkbox两个属性, <el-t

  • vue elementUI tree树形控件获取父节点ID的实例

    首先找到element-ui.common.js文件 如下 具体看你工程下的node_modules D:\workSpace\vue_manage\node_modules\element-ui\lib\element-ui.common.js 找到getCheckedNodes该方法 细节如下我的该方法在21618行 TreeStore.prototype.getCheckedNodes = function getCheckedNodes() { var leafOnly = argume

  • 详解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="

  • vue2+elementUI的el-tree的选中、高亮、定位功能的实现

    在使用无选择框的el-tree时遇到的坑以及如何使用el-tree 最后附全部代码 ref="tree" ----> 必须写 accordion ----> 是否每次只打开一个同级树节点展开 看个人选择 default-expand-all ----> 默认打开全部节点 :data="leftData" ----> 必写 展示数据 @node-click="handleNodeClick" ----> 节点被点击时的

  • Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)

    这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级关系,就一定会用到树形组件了. 使用Vue + Element UI,构建出最基本的树如下图所示: 现在我们就要在这个基础上进行改造,使页面更加符合我们的交互场景. 下拉菜单 将下拉菜单嵌到树节点中,使操作更加简便.紧凑. 效果演示 效果如图: 图示1:悬浮在树节点状态 图示2:点击三个点图标状态

  • vue2+elementUI的el-tree的懒加载功能

    lazy 属性为true 时生效lazy ----> 是否懒加载子节点,需与 load 方法结合使用 isLeaf可以提前告知 Tree 某个节点是否为叶子节点,从而避免在叶子节点前渲染下拉按钮. HTML部分 <el-tree class="filter-tree" ref="tree" accordion :data="leftData" @node-click="handleNodeClick" node-k

  • vue+element tree懒加载更新数据的示例代码

    使用element tree实现懒加载,更新某一节点的数据 1.tree 懒加载 只需要在el-tree标签上面添加lazy,load属性,load的接收是一个函数.这里贴上官网给出的方法 <el-tree :data="treeList" ref="tree" class="vue-tree" lazy :load="loadNode" :highlight-current="true" :node

  • element tree懒加载:load="loadNode"只触发一次的解决方案

    当tree 懒加载获取 信息时,只有在第一次 加载时,触发 :load=“loadNode” ,但是这样明显是不合理的,因为当增删改查,后端数据已经改变,但是咱们的:load=“loadNode” 不会再次触发,导致数据显示问题; <el-tree :props="props" :load="loadNode" lazy @node-click="handleNodeClick"></el-tree> data() { r

  • vue+element实现动态加载表单

    本文实例为大家分享了vue+element实现动态加载表单的具体代码,供大家参考,具体内容如下 一.问卷动态加载表单 //html <el-form :model="quesPaper" status-icon label-width="100px" label-position="top" size="small" v-loading="paperLoading" > <el-form-

  • Vue使用el-tree 懒加载进行增删改查功能的实现

    关于vue的树形展示 使用到项目:以树的形式异步展现 效果图先放: 找到element-ui的官方文档,el-tree.(地址:https://element.eleme.cn/#/zh-CN/component/tree ) 项目需求:以懒加载的形式展示,目录根据需求需要有新增 编辑 删除 操作以及操作后的刷新树结构 那我们现在开始吧 一. 懒加载:Tree的懒加载,用一个属性控制:lazy.使用lazy,就要使用load来加载数据进行渲染树 原理:初始化触发load函数先加载初始数据,通过点

  • vue实现一个懒加载的树状表格实例

    目录 一个懒加载的树状表格实例 安装 模板 js代码 使用el-table懒加载树形表格时的注意点 1.版本问题 2.数据显示 3.滚动条 4.数据结构 5.el-table的fixed导致的问题 一个懒加载的树状表格实例 实现一个树状表格,需要用到vxe-table这个库,虽然element-ui也能实现,但这个库是专门针对表格做了更多的拓展,功能更多一些. 接下来,说一下使用方式. 安装 npm install xe-utils vxe-table // 入口文件引入,一般是main.js

  • vue实现图片懒加载的方法分析

    本文实例讲述了vue实现图片懒加载的方法.分享给大家供大家参考,具体如下: vue图片懒加载使用 首先第一步,安装插件 vue-lazyload npm install vue-lazyload --save-dev 在man.js中引入插件 import VueLazyLoad from 'vue-lazyload' 使用 Vue.use(VueLazyLoad,{ error:'', //加载失败的图 loading:'' //加载中的默认图 }) 这是一个最简单的配置 官方的详细扩展配置文

  • 实现一个Vue自定义指令懒加载的方法示例

    在项目中如果有大量的图片需要加载的时候,就可以考虑使用懒加载了,懒加载其实就是监听浏览器的滚动,当滚动到一定的范围的时候就将图片的真实路径赋给src,然后取消监听.实现的方法也比较简单,可以通过懒加载的插件实现,也可以手写,手写通过vue自定义指令来实现,一般情况自定义指令用的也不多,比较vue自带的就够用了,大型复杂的项目的可能用的多. 什么是图片懒加载 当我们向下滚动的时候图片资源才被请求到,这也就是我们本次要实现的效果,进入页面的时候,只请求可视区域的图片资源这也就是懒加载. 比如我们加载

  • angular+ionic 的app上拉加载更新数据实现方法

    第一步,首先需要在<ion-content>标签里面加入标签<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="5%"></ion-infinite-scroll> 里面的属性解释, ng-if  值 布尔型,如果为true,则可以触发上拉事件 on-infinite 上拉时触发的事件 distance 列表底部滚动到可

  • vue实现路由懒加载及组件懒加载的方式

    一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式有两种:即使用vue异步组件 和 ES中的import 1.未用懒加载,vue中路由代码如下 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld'

  • Vue Router的懒加载路径的解决方法

    单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的平衡点. 解决办法 .vue模块文件按需加载,其实要做到两件事情:一是标记出这是一个异步组件:二是通知webpack把该组件单独产出为一个chunk. vue的异步组件 官网给出的异步组件写法:异步组件是一个函数,函数的返回值是一个Promise,只是Promise的resolve函数的参数是常规组

随机推荐