使用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();
}

优化

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

相关推荐
无奈何杨9 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭16 分钟前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆20 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
程序员爱钓鱼30 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子32 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆32 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了33 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆38 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆39 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆39 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js