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

优化

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

相关推荐
RadiumAg23 分钟前
记一道有趣的面试题
前端·javascript
yangzhi_emo27 分钟前
ES6笔记2
开发语言·前端·javascript
yanlele43 分钟前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子2 小时前
React状态管理最佳实践
前端
烛阴2 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子2 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情2 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
华子w9089258593 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
天天扭码3 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html