使用 Vue.js 实现 TableTree 树形表格和 VirtualList 虚拟滚动列表

最新推荐文章于 2025-06-14 18:54:17 发布

转载最新推荐文章于 2025-06-14 18:54:17 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/givingwu/p/10351887.html

文章标签：

#javascript #ViewUI

在面对大量数据展示时，传统的表格组件如element-ui的<Table/>会导致页面卡顿。本文介绍如何在Vue.js中实现虚拟滚动列表，以解决biglistdata场景下性能问题。文章详细讨论了在单列中同时存在选择和可展开元素时的解决方案，并分享了自定义<Table-Tree/>和<Virtual-List/>组件的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js 实现虚拟滚动列表

起因

在之前公司的 2B 业务场景中，出现了 big list data 的场景。

若使用 element-ui <Table /> 组件，至多上百条，就变得有些卡顿。
业务中还出现了单列中即存在 <table-column type="select" /> 和 <table-column type="expandable">，即一个节点的数据如果存在 node.children.length 则渲染 <ExpandableTable /> 否则渲染 <Select />。

因此，最终需要自己实现。但是由于当时时间因素，我先实现了 <Table-Tree /> 组件，后实现了 <Virtual-List /> 组件。