使用el-tree组件显示数据，后端返回的数据量过大怎么处理？

前言

使用element-plus的Tree树形控件去展示数据，当数据量过大时，页面会出现卡顿，这时就需要做优化处理，而el-tree组件有个属性load，懒加载获取数据：在点击节点时才进行该层数据的获取。然而，如果某个节点的数据量也很大，那这个懒加载也没有什么作用了，页面一样会出现卡顿。所以本文的做法是采用分页形式显示节点数据。

思路

利用插槽自定义树节点的内容，当节点的数据超过某个值时显示分页，也就是下面data里的length，然后通过切换上、下一页按钮动态更新节点数据，更新数据使用el-tree提供的方法：updateKeyChildren(key, data) 节点的key和新数据data，需要设置node-key，并且node-key绑定的值需要唯一，否则会更新出错。

主要代码

ts 复制代码

//data数据格式
//这里的length,page,size都提前写在data里了，方便演示分页功能。
{
    id: "1",
    level: "0",
    isLeaf: false,
    name: "节点一",
    length: "10",
    children: [
      {
        id: "1-1",
        level: "1",
        parentId: "1",
        isLeaf: false,
        name: "节点二",
        length: "500",
        page: 1,
        size: 10,
        children: [
          {
            id: "1-1-1",
            level: "2",
            parentId: "1-1",
            isLeaf: true,
            name: "节点三-0",
          },
          {
            id: "1-1-2",
            level: "2",
            parentId: "1-1",
            isLeaf: true,
            name: "节点三-1",
          },
          {
            id: "1-1-3",
            level: "2",
            parentId: "1-1",
            isLeaf: true,
            name: "节点三-2",
          },
          //假设有500条
          ...
        ]
      },
      ...
    ]
 }

ts 复制代码

<template>
<el-tree
    ref="treeRef"
    :data="data"
    node-key="id"
    :props="defaultProps"
>
    <template #default="{ node, data }">
        <span v-if="!data.isLeaf">{{ data.name }}（{{ data.length }}）</span>
        <span v-if="data.length > 50">
            <i @click.stop="getPreData(node)">上一页</i>
            <i @click.stop="getNextData(node)">下一页</i>
            <span>第{{ data.page }}页</span>
        </span>
    </template>
</el-tree>
</template>
<script setup lang="ts">
const treeRef = ref();
const defaultProps = {
  label: "name",
  children: "children",
};
//上一页
function getPreData(node) {
  if (node.data.page === 1) return;
  const prePage = node.data.page > 1 ? --node.data.page : 1;
  updateNodeData(node.key, prePage);
}
//下一页
function getNextData(node) {
  const allPage = node.data.length / node.data.size;
  if (node.data.page === allPage) return;
  const nextPage = node.data.page < allPage ? ++node.data.page : allPage;
  updateNodeData(node.key, nextPage);
}
//更新节点数据
async function updateNodeData(key, page) {
  const res = await getData(page);//向后端请求新数据
  treeRef.value.updateKeyChildren(key, res);
  await nextTick();
}

优化

这个做法也是有很多改进的地方（只是提供一个思路），比如分页的参数，页面优化等等。。。可以评论分享您的思路与做法~