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

目录

实现懒加载tree,需要为tree组件添加lazy和:load="load"

首先,load属性绑定一个懒加载函数,当点击节点时触发

一般是通过树节点id请求后端接口,添加新的节点数据,但我最近遇到的是后端一次性返回上千条数据(树数组结构),由前端进行处理实现懒加载

我们来看下怎么实现

  <el-tree
      ref="tree"
      lazy
      :load="load"
      highlight-current
      @node-click="handleNodeClick"
      :expand-on-click-node="false"
      :node-key="key"
      :props="defaultProps"
      :current-node-key="currentNodeKey"
    >
   </el-tree>
  • load方法会回调两个参数,第一个是节点信息node,第二个是加载函数resolve
  • resolve会默认触发一次,并且node.level===0,所以就不用在created中请求后端数据了,直接在默认触发中请求后端数据
  • 如果node.level===0说明是默认触发,直接resolve请求后端返回的树数组数据,el-tree懒加载情况下只会渲染数组的第一级,不会渲染数组的children
  • 在默认触发的时候将树数组转成扁平数组,后续懒加载节点的时候从扁平数组里取就可以了
  • 因为懒加载树无法判断有没有子节点,所以必须手动添加leaf:true,才能取消左侧的小箭头,在树结构数组转换成扁平数组时给没有子节点的数组对象加上这一属性
  • 很多时候需要默认展开树节点,比如选中第一级下第一个节点,在nextTick中nodedata.expanded = true来展开节点,nodedata.loadData()再次触发resolve函数
  methods: {
    /** 传递一个懒加载函数给el-tree组件 */
    load(node, resolve) {
      this.chooseNode = node;
      // 这里后端给的数据唯一标识不是id,是key,根据个人数据修改
      this.getTreeData(node.level, node.data.key, resolve);
    },
    /** 懒加载树节点数据处理函数 */
    async getTreeData(level, key, resolve) {
      if (level === 0) {
        this.loading = true;
        const { data: res } = await http.post('getTreeNode');
        if (res.code === 200 && res.data && res.data.length) {
          this.treeData = this.treeArrayToArray(res.data);
          resolve(res.data);
          this.$nextTick(() => {
            // 零级的第一个子节点,也就是第一级的第一个节点
            let nodedata = this.chooseNode.childNodes[0];
            nodedata.expanded = true;
            // 再次触发load方法
            nodedata.loadData();
            // 注意,因为上方再次触发load方法,走了this.chooseNode = node;这一步,所以这里的 this.chooseNode指向的是零级的子节点,也就是第一级,这里的`this.chooseNode.childNodes[0]`表示的是是第二级的第一个节点
            this.currentNodeKey = this.chooseNode.childNodes[0].data.key;
            this.handleNodeClick(this.chooseNode.childNodes[0].data);
          });
        } else {
          resolve([]);
        }
        this.loading = false;
      } else {
        // 根据key去找到点击树节点的children数组,加载数据到其下
        const currentNode = this.treeData.find(item => item.key === key);
        if (currentNode.children && currentNode.children.length) {
          resolve(currentNode.children);
        } else {
          resolve([]);
        }
      }
    },
    /** 树结构数组转换成扁平数组 */
    treeArrayToArray(tree) {
      const arr = [];
      function recursiveFunction(tree) {
        for (let i = 0; i < tree.length; i++) {
          // 给所有没有子节点的节点添加leaf属性,该属性用来取消左侧小箭头
          if (!(tree[i].children && tree[i].children.length)) {
            tree[i].leaf = true;
          }
          arr.push(tree[i]);
          if (tree[i].children && tree[i].children.length) {
            recursiveFunction(tree[i].children);
          }
        }
      }
      recursiveFunction(tree);
      return arr;
    },
    /** 获取点击树节点的数据,进行渲染右侧页面等操作 */
    handleNodeClick(data) {
    },
  },

到此这篇关于el-tree树组件懒加载(后端上千条数据前端进行处理)的文章就介绍到这了,更多相关el-tree树组件懒加载内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 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" :

  • 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 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

  • el-tree loadNode懒加载的实现

    需要 lazy. load 两个属性一起用 <el-tree           :data="treeData"           :props="defaultProps"           :load="loadNode"           @node-click="handleNodeClick"           lazy> </el-tree> data() { return { t

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

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

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

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

  • 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

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

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

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

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

  • vue3.0+vite2实现动态异步组件懒加载

    创建一个vite项目 性能决定成败;vite确实快: cmd 命令行(默认你已经安装了node & npm),执行npm init @vitejs/app vue-study – --template vue: cd至vue-study,npm install(安装依赖); npm run dev(启动项目): 创建组件 新建一个目录为pages,pages下面再新建一个目录contents,contens下面可以新建具体的组件目录页面,此时目录结构为 App.vue <template&g

  • vue异步组件与组件懒加载问题(import不能导入变量字符串路径)

    目录 vue异步组件与组件懒加载 错误的原因分析 解决方案一 解决方案二 vue懒加载组件 路径不对 vue异步组件与组件懒加载 在写项目的时候,需要动态配置路由菜单,所有的菜单都是通过配置生成的,这就意味着菜单的路径(在vue开发项目里面就是一个字符串的路径)需要异步加载进去,但是由于对webpack的import不是很熟悉,所以就有一下的坑需要填了 错误的原因分析 _import.js module.exports = file => () => import(file) 但是这种方法错误

  • 基于angular6.0实现的一个组件懒加载功能示例

    我们常常会遇到这样一个问题,当我们使用一个第三方控件库的时候,我们只用到了其中 1 个或某几个组件,会连带一大堆无用的东西,造成体积臃肿不堪.又或者首页用到的组件较多,首页加载速度缓慢,这个时候,我们或许需要加载用户可视范围内用到的组件,随着用户的浏览下拉,我们再去加载这些组件,渐进式加载,渐进式体验,这个时候你或许就用到了本工具所实现的功能.或者一个页面的某些不重要区域,比如第三方广告又或者不重要的元素,可以采用懒加载懒渲染,降低用户首屏等待时间.一切都在用户不知不觉中进行.大大增加用户体验,

  • 详解Android_性能优化之ViewPager加载成百上千高清大图oom解决方案

    一.背景 最近做项目需要用到选择图片上传,类似于微信.微博那样的图片选择器,ContentResolver读取本地图片资源并用RecyclerView+Glide加载图片显示就搞定列表的显示,这个没什么大问题,重点是,点击图片进入大图浏览,比如你相册有几百张图片,也就意味着在ViewPager中需要加载几百个view,况且手机拍出来的图片都是1-2千万左右像素的高清大图(笔者手机2千万像素 也就是拍照出来的照片3888*5152),大小也有5-7个兆,ViewPager滑动不了十几张就oom了,

  • 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在懒加载模式下的动态更新

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

  • vue2组件实现懒加载浅析

    一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 三.如何与webpack配合实现组件懒加载 1.在webpack配置文件中的output路径配置chunkFilename属性 output: { pat

随机推荐