在使用 Vue 3 和 Element Plus 构建现代 Web 应用时，表格（Table）组件经常被用于显示大量数据。为了优化性能和用户体验，我们通常会实现懒加载功能。此外，当用户在表格中进行某些操作时（如编辑或删除某行数据），有时需要刷新当前操作的节点。本文将详细介绍如何实现这些功能。
<el-table ref="tableRef" :data="tableData" row-key="id" lazy :load="lazyLoad" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" >
在懒加载table中的lazyLoad操作
关键的记录操作节点和刷新节点方法
// 记录点击节点 const recordNodes = new Map(); // 操作后刷新当前点击节点数据 function refreshNodeFn() { const { row, treeNode, resolve } = recordNodes.get(form.value.id); lazyLoad(row, treeNode, resolve); }
这里是懒加载的时候记录节点
const lazyLoad = (row, treeNode, resolve) => { Api({ id: row.id }) .then(res => { form.value.id = row.id; recordNodes.set(row.id, { row, treeNode, resolve }); resolve(res.success ? res.data || [] : []); }) .catch(() => { resolve([]); }); };
重要的是你操作其他的编辑删除操作时要更新form.id来更新节点这样你操作刷新后就请求的是你当前的操作节点
总结
通过本文的介绍，你应该已经掌握了如何在 Vue 3 和 Element Plus 中实现 Table 的懒加载功能，以及如何在表格操作后刷新当前节点。懒加载可以显著提高大数据量表格的性能，而适时刷新操作节点可以确保用户看到的数据始终是最新的。希望这些技巧能在你的项目中派上用场。
