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

前言

使用element-plusTree树形控件去展示数据,当数据量过大时,页面会出现卡顿,这时就需要做优化处理,而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();
}

优化

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

相关推荐
橘子海全栈攻城狮1 分钟前
【源码+文档+调试讲解】基于SpringBoot + Vue的知识产权管理系统 041
java·vue.js·人工智能·spring boot·后端·安全·spring
哆啦A梦15883 分钟前
36 注册
前端·javascript·html
华仔啊5 分钟前
面试官:说说async/await?我差点翻车!原来还可以这么用
前端
菥菥爱嘻嘻17 分钟前
输出---修改ant样式
前端·react.js·anti-design-vue
该用户已不存在1 小时前
这6个网站一旦知道就离不开了
前端·后端·github
Ai行者心易1 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端·后端
东东2331 小时前
前端开发中如何取消Promise操作
前端·javascript·promise
掘金安东尼1 小时前
官方:什么是 Vite+?
前端·javascript·vue.js
柒崽1 小时前
ios移动端浏览器,vh高度和页面实际高度不匹配的解决方案
前端
烛阴2 小时前
为什么游戏开发者都爱 Lua?零基础快速上手指南
前端·lua