Vue Bootstrap b-table 懒加载数据

Posted 2023-02-22

【中文标题】Vue Bootstrap b-table 懒加载数据

【英文标题】：Vue Bootstrap b-table lazy load data

【发布时间】：2021-05-13 01:39:06

【问题描述】：

所以以最简单的方式，我使用 Vue Bootstrap 作为我的项目的框架。

我需要在我的项目中添加一个自定义表格，其中的数据可以包含数千个单元格（100 多列和 1k 多行）。

我不想在组件安装时呈现 100% 的表格。我只想渲染可见数据（可能多一点），当用户滚动 X 或 Y 时，更多的单元格将被延迟渲染。

除非需要，否则我宁愿坚持使用 Boostrap Vue 的表格，而不是只为表格使用外部库。

实现这一目标的最佳方法是什么？

希望你今天一切顺利！

【问题讨论】：

您可能应该查看虚拟滚动器以获取该大小的数据集，否则您会很快发现性能问题。 For example

【参考方案1】：

您可以使用items prop 接受“items provider function”从远程数据库获取数据。在您的 API 请求中使用分页和过滤，并且仅在每个请求中获取所需的数据，例如 10 个项目，并在表中仅呈现 10 个项目。

您可以在官方文档here 中找到示例。