element ui树形表格数据懒加载

最新推荐文章于 2025-09-25 00:12:14 发布
原创 最新推荐文章于 2025-09-25 00:12:14 发布 · 1.9k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文介绍了在处理大量数据时，前端如何使用懒加载优化用户体验。通过设置row-key作为表格唯一标识，利用data属性加载初始数据，并在load方法中按需加载子数据。当用户点击展开图标时，根据触发事件的数据id调用接口获取子数据，更新hasChildren属性，再由resolve返回，实现数据的动态加载。

参考这篇博客

在项目实战中，我们经常会遇到数据量大的情况，假如一次性从后端接口中获取所有的数据，无疑给了服务端很大的压力。响应时间过长导致用户的体验也不好，这个时候我们经常使用懒加载的方法来获取列表数据。

在这里插入图片描述
row-key是这个表格必须要的 key就是唯一标识 这个有id的话肯定是用id的
然后就是data属性 这个通常做第一层数据的来源
load方法就是每次点击展开时出发的方法。

先要在第一个生命周期中请求最顶级的数据 并给和表格data属性绑定的tableData赋值item.hasChildren属性为true 这条数据的前面就会出现那个表示可以展开的小箭头 为false 则不展示。
在这里插入图片描述
然后我们来编写load对应的函数
在这里插入图片描述
这个函数时在当某一条数据前面的展开小箭头被点击时触发的
接收三个参数
第一个是触发这个事件的那条数据
第二个我们不需要使用
第三个是返回给他的子数据
这里我们通过第一个参数就是触发事件的那条数据的id去调接口
然后判断接口返回的数据如果不是空的 则将他的子集循环 将他们的hasChildren 也赋为true 表示数据项是可以接着展开的
然后将调出来的子数据扔给resolve 这样他就会出现成为触发事件数据的子集。

vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查
i_am_a_div的博客
12-23 6563
vue+element实现树状表格，使用树形数据与懒加载实现树状表格的增删改查
最简单 实现 Element-ui el-table的懒加载表格数据 el-table懒加载请求数据 element-ui 懒加载
半只
08-25 4739
/ 判断当前行 属性 'lazy' 是否 等于 undefined, 等于 undefined 就请求后端加载数据 才加载日志数据。'荷兰优质淡奶，奶香浓而不腻''荷兰优质淡奶，奶香浓而不腻''荷兰优质淡奶，奶香浓而不腻''荷兰优质淡奶，奶香浓而不腻''荷兰优质淡奶，奶香浓而不腻''江浙小吃、小吃零食''上海市普陀区真北路''江浙小吃、小吃零食''上海市普陀区真北路''江浙小吃、小吃零食''上海市普陀区真北路''江浙小吃、小吃零食''上海市普陀区真北路''江浙小吃、小吃零食''上海市普陀区真北路'
element树形控件懒加载的动态加载
09-08
利用element树形控件菜单栏被触发时加载事件进行Element树形结构懒加载的动态加载。
Element UI表格懒加载：Table异步数据加载
最新发布
gitblog_00319的博客
09-25 363
在现代Web应用开发中，处理大量数据时，前端性能优化至关重要。特别是当我们需要展示成千上万条记录时，一次性加载所有数据不仅会导致页面加载缓慢，还会显著增加服务器负担。Element UI的Table组件提供了一种高效的解决方案——表格懒加载（Lazy Loading），它允许我们在用户滚动到表格底部时再异步加载更多数据，从而提升用户体验和系统性能。 ## 懒加载原理与优势 ### 什么是表格懒...
Element-UI表格懒加载数据，只需请求一次后台数据
weixin_45364599的博客
08-20 2104
项目开发不需要分页，客户不想点来点去，想要表格数据全部显示出来，但是表格数据每次都有七八千条，界面根本加载不出来，经常卡死，把客户气得要死。 后台又不想写分页，说他数据请求的很快，只要一两秒，然后问题只能我来解决，只能写一个表格懒加载，代码如下： this.allData = pos;//所有数据，将近一万条，pos是返回的数据 this.tabData = [];//定义个二维数组来存每页20条的数据 for (var i = 0, leng = this.allD...
实现 Element UI el-table 树形数据的懒加载
专注java二开部署
03-30 1586
当面对大量数据时，一次性加载所有数据可能会导致性能问题。为了解决这一问题，我们可以实现树形数据的懒加载。本文将介绍如何在使用 Element UI 的 Vue 应用中为 el-table 组件的树形数据添加懒加载功能。
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
10-14
Element-ui的el-tree组件是Vue.js开发中常用的一个树形控件，它提供了丰富的功能，如懒加载、自定义增删改以及局部刷新等。在本文中，我们将深入探讨如何利用这些特性来实现一个功能完善的树形控件。 首先，让我们...
vue+element UI实现树形表格带复选框的示例代码
10-17
在Vue和Element UI框架中，实现树形表格带复选框功能可以极大地增强用户界面的交互性和数据管理能力。以下是一些关键知识点和步骤，详细解释如何构建这样的组件： 1. **数据转换**： 树形表格的数据通常不是直接以...
vue elementUI table表格数据 滚动懒加载的实现方法
10-17
在处理大量数据展示时，为了避免一次性加载过多数据导致页面响应慢或用户体验不佳，我们可以采用滚动懒加载（Scroll Lazy Loading）的技术。在 Vue 和 ElementUI 中实现滚动懒加载主要涉及以下知识点： 1. **Vue ...
ElementUI el-table树形表格懒加载如何手动刷新 el-table树状表格手动刷新的方法
热门推荐
无枫的博客，分享Java及Vue方向的技术文章
10-09 1万+
最近在使用elementplus的el-table表格组件时，发现一个问题，我的业务场景需要使用树形表格，并且使用懒加载的模式加载子级数据，但是使用elementplus自带的树形表格和懒加载功能，懒加载仅会在第一次展开时加载，后续会使用第一次缓存的数据，而不会重新加载，本篇文章提供了解决方案。 我的环境是elementplus，按照相同原理，应该是可以在elementui中使用的，下面开始正文。 首先，先看一下table组件的相关代码： <el-table :data="xxxList"
【element-ui】el-table子级表格懒加载
weixin_48847755的博客
03-19 3483
el-table多层级表格懒加载
Element-UI中el-table树形懒加载的增、删、改操作
Tizzyhong的博客
10-22 901
el-table树形懒加载的增删改操作
element懒加载树形表格
tianfeng159357的博客
03-21 1407
临时时间：{{ row.expireDate }}临时时间：{{ row.expireDate }}临时时间：{{ row.expireDate }}临时时间：{{ row.expireDate }}临时时间：{{ row.expireDate }}临时时间：{{ row.expireDate }}临时时间：{{ row.expireDate }}临时时间：{{ row.expireDate }}临时时间：{{ row.expireDate }}// 添加组织目录下用户。// 查询目录树 设备。
vue2 + element ui el-table树形结构表格 改造为 树懒加载
HL0512的博客
06-27 1439
基于vue2 + element ui 树形结构表el-table 改造的懒加载树tree,支持多字段内容展示
Elementui 表格请求懒加载
m0_60997870的博客
06-09 637
主要是通过 设置 lazy :load="load" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" 这三个属性表格中的数据必须带有hasChildren=true
element的Table表格组件树形数据与懒加载简单使用
weixin_41549971的博客
01-10 2683
element的Table表格组件树形数据与懒加载简单使用
element el-table 树形数据、懒加载添加排序功能。懒加载数据同步更新
xia_zixin的博客
12-20 2446
表格自带的排序功能目前只针对第一级树结构，那么当我们想对整体树形数据来排序的时候就要经过特殊处理了。这里的问题在于不能直接拿到children来排序, 我们需要定义map来储存懒加载的数据。一定要有唯一标识，children的id不能与外层id相同。在data中加入一个map来用于存取数据
element-ui懒加载实现树形表格以及如何解决树形表格懒加载缓存问题
qq_41860287的博客
03-26 3927
树形表格的实现问题，官网都是静态数据，实际开发过程中，数据都是动态请求过来的，导致初学者在使用过程中会踩很多坑，就像我，这里记录一下树形表格实现中出现的一些问题。 我们先来看官网中给出的树形表格实现的例子： ...
element-UI中table组件树形数据懒加载，如何刷新数据？
07-18
在使用 Element UI 的 `el-table` 组件展示树形数据并实现懒加载功能时，刷新数据可能会遇到一些问题。这是由于 `el-table` 在懒加载模式下，会缓存已加载的子节点数据。如果直接对数据进行修改，表格可能不会自动刷新显示。 ### 刷新懒加载数据的解决方案 1. **手动更新 `lazyTreeNodeMap`** 当懒加载的数据为空时，`el-table` 不会自动刷新，因为其内部逻辑中只有在数据长度不为 0 时才会触发更新。此时可以通过手动更新 `lazyTreeNodeMap` 来实现刷新。 ```javascript async load(tree, treeNode, resolve) { const { data } = await errorCodeApi.getSubErrorCode({ parentCode: tree.errorCode, ...this.searchForm, }); if (!data) { // 手动设置 lazyTreeNodeMap 中的值为空数组 this.$set(this.$refs.table.store.states.lazyTreeNodeMap, tree.id, []); } else { resolve(data); } // 记录节点信息 this.maps.set(tree.errorCode, { tree, treeNode, resolve }); } ``` 2. **删除子节点后刷新** 如果需要在删除子节点后刷新数据，可以直接操作 `lazyTreeNodeMap`，找到父节点并更新其子节点数组。 ```javascript deleteLazyTableItem(item) { const store = this.$refs.table.store; if (item.parent != -1) { let parentRow = store.states.data.find(child => child.id == item.parent); if (!parentRow) { const keys = Object.keys(store.states.lazyTreeNodeMap); for (let i = 0; i < keys.length; i++) { parentRow = store.states.lazyTreeNodeMap[keys[i]].find(child => child.id == item.parent); if (parentRow) { break; } } } parentRow.childrenCount--; const parent = store.states.lazyTreeNodeMap[item.parent]; const index = parent.findIndex(child => child.id == item.id); parent.splice(index, 1); } else { const parent = store.states.data; const index = parent.findIndex(child => child.id == item.id); parent.splice(index, 1); } } ``` 3. **强制刷新整个表格** 如果需要刷新整个表格数据，可以重新加载根节点数据，并清空 `lazyTreeNodeMap`，以确保所有子节点数据都会重新加载。 ```javascript refreshTable() { this.$refs.table.store.states.lazyTreeNodeMap = {}; this.loadData(); // 重新加载根节点数据 } ``` ### 优化建议 - **使用 `map` 存储节点信息** 在懒加载过程中，可以使用 `map` 存储每个节点的信息，以便在需要刷新时快速找到对应的节点和数据。 - **避免不必要的刷新** 在刷新数据时，应尽量避免对整个表格进行刷新，而是只刷新受影响的部分数据，以提高性能。 - **结合后端接口重新获取数据** 在某些情况下，直接调用后端接口重新获取数据并更新 `lazyTreeNodeMap` 是更可靠的方式。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值