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

当tree 懒加载获取 信息时,只有在第一次 加载时,触发 :load=“loadNode” ,但是这样明显是不合理的,因为当增删改查,后端数据已经改变,但是咱们的:load=“loadNode” 不会再次触发,导致数据显示问题;

<el-tree :props="props" :load="loadNode" lazy @node-click="handleNodeClick"></el-tree>

data() {
    return {
          node_had: [], // 触发 tree 的 :load=loadNode 重复触发  动态更新tree
          resolve_had: [], // 触发 tree 的 :load=loadNode 重复触发  动态更新tree
      },
},

methods:{
   // 异步树叶子节点懒加载逻辑
    loadNode(node, resolve) {
      // console.log(node, resolve)
      // 一级节点处理
      if (node.level === 0) {
        this.node_had = node; //这里是关键！在data里面定义一个变量，将node.level == 0的node存起来
        this.resolve_had = resolve; //同上，把node.level == 0的resolve也存起来
        this.requestTree(resolve);
      }
      // 其余节点处理
      if (node.level >= 1) {
        // 注意！把resolve传到你自己的异步中去
        this.getIndex(node, resolve);
      }
    },
    // 触发 tree 的 :load=loadNode 重复触发  动态更新tree
    requestNewData() {
      this.node_had.childNodes = []; //把存起来的node的子节点清空，不然会界面会出现重复树！
      this.loadNode(this.node_had, this.resolve_had); //再次执行懒加载的方法
    },
    // 点击 按钮时 显示tree 时候 触发 函数 重新渲染tree
    _handleCopy(_tableSelection) {
      this.requestNewData(this.node_had, this.resolve_had);
    }
}

到此这篇关于element tree懒加载:load="loadNode"只触发一次的解决方案的文章就介绍到这了,更多相关element tree懒加载:load="loadNode"内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解如何实现Element树形控件Tree在懒加载模式下的动态更新

    Element提供的Tree树形控件,可以用清晰的层级结构展示信息,还可以展开或折叠.Tree支持两种加载模式:一次性加载全部树节点和懒加载模式.所谓懒加载模式,是指当需要展开父节点时才渲染子节点.懒加载模式的应用场景适合树节点数据量大的情形,在一定程度上可以优化图形用户界面的响应效率以及提升用户体验.但是,懒加载模式对数据动态刷新应用需求的支持不尽如意.树形控件节点一旦展开就缓存在本地,后续不会再继续更新和刷新节点数据.本文将介绍如何实现Element树形控件Tree在懒加载模式下的动态更新.

  • 如何隐藏element-ui中tree懒加载叶子节点checkbox(分页懒加载效果)

    如何隐藏element-ui中tree懒加载叶子节点checkbox(分页懒加载效果)

    目录 1.首先按照官网 2.由于属性是isleaf 3. 分页懒加载实现功能也比较简单 根据最新的工作需求中指示,要求Tree树组件为lazy懒加载,且能够进行复选框选择,这个实现简单,设置show-checkbox即可,若此处要求叶子节点也不能包含复选框,就有些困扰了 1.首先按照官网 拷贝tree树组件代码,设置完show-checkbox,图中查看更多为叶子节点,且设置数据节点属性为disabled <el-tree ref="treeRef" class="tr

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

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

  • elementui中使用el-tree控件懒加载和局部刷新

    elementui中使用el-tree控件懒加载和局部刷新

    目录 使用el-tree控件懒加载和局部刷新 懒加载 局部刷新 element-ui el-tree lazy懒加载局部刷新的问题 使用el-tree控件懒加载和局部刷新 懒加载 按照 elementui官方文档示例,效果图 template部分,需要结合 lazy 和 load 一起使用 <el-tree show-checkbox node-key="id" lazy :load="loadNode" :props="defaultProps&q

  • 基于element-ui封装可搜索的懒加载tree组件的实现

    引言 最近开发项目时遇到一个需求就是采用tree的方式展示以万为单位的数据,因为数据量大第一反应就是采用"懒加载"的方式实现,为了方便用户在庞大的数据量中快速定位到某个节点搜索功能也是必不可少的:因为采用"懒加载"数据,搜索当然也是远程搜索了:确定了需求当然第一时间就去网上找有没有小伙伴已经实现了相关组件,最后....,还是自己实现一个吧(由于公司采用的element-ui所以基于el-tree进行改造):[这只是自己实现的一种思路,希望大家多多指正] 1.懒加载树

  • 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 tree懒加载更新数据的示例代码

    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 Plus的el-tree-select组件懒加载+数据回显详解

    目录 一.背景说明 二.使用 1. dom 2.methods 三.回显 总结 一.背景说明 技术:Vue3 + Element Plus 需求:在选择组织机构时以树结构下拉展示. 用到组件:TreeSelect 树形选择组件(el-tree-select) 官网文档地址: https://element-plus.gitee.io/zh-CN/component/tree-select.html https://element-plus.gitee.io/zh-CN/component/tre

  • Element树形控件el-tree懒加载并设置默认展开和选中的效果

    使用elementui树组件,通过懒加载加载数据,并设置默认展开和全部选中的效果. <el-tree :load="loadNode" node-key="org_id" is-connection-line show-checkbox lazy :default-checked-keys="defaultSelectCids" :default-expanded-keys="defaultExpandedCids" :

  • el-tree树组件懒加载(后端上千条数据前端进行处理)

    目录 实现懒加载tree,需要为tree组件添加lazy和:load="load" 首先,load属性绑定一个懒加载函数,当点击节点时触发 一般是通过树节点id请求后端接口,添加新的节点数据,但我最近遇到的是后端一次性返回上千条数据(树数组结构),由前端进行处理实现懒加载 我们来看下怎么实现 <el-tree ref="tree" lazy :load="load" highlight-current @node-click="h

  • vue2笔记 — vue-router路由懒加载的实现

    在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用. 用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某

  • android实现ViewPager懒加载的三种方法

    在项目中ViewPager和Fragment接口框架已经是处处可见,但是在使用中,我们肯定不希望用户在当前页面时就在前后页面的数据,加入数据量很大,而用户又不愿意左右滑动浏览,那么这时候ViewPager中本来充满善意的预加载就有点令人不爽了.我们能做的就是屏蔽掉ViewPager的预加载机制.虽然ViewPager中提供的有setOffscreenPageLimit()来控制其预加载的数目,但是当设置为0后我们发现其根本没效果,这个的最小值就是1,也就是你只能最少前后各预加载一页.那么,这时候

  • vue-router路由懒加载的实现（解决vue项目首次加载慢）

    在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用. 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的

随机推荐