vue树形组件 懒加载 后端上千条数据如何进行前端处理

　　随着互联网的快速发展，前端组件的重要性日益凸显，而在处理大量数据时，尤其是后端返回上千条数据时，我们常常面临着性能问题和用户体验的挑战。而Vue树形组件的懒加载功能，为我们提供了一种解决方案。通过懒加载，我们可以有效地减少前端渲染的负担，只在需要展示的节点上进行数据请求，大大提升了页面的加载速度和用户体验。本文将探讨如何使用Vue树形组件的懒加载功能，来处理后端上千条数据的情况，以实现高效的前端数据处理。

首先，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，第二个是加载函数resolveresolve会默认触发一次，并且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) {    },  },

到此这篇关于vue树形组件 懒加载的文章就介绍到这了,更多相关el-tree树组件懒加载内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

　　以上是关于Vue树形组件懒加载的全部内容，如果您遇到这种情况，您可以按照以上方法解决，希望这能对大家有所帮助。