Vue Bootstrap b表延迟加载数据

Question

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

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

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

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

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

希望你今天一切顺利！

Answer 1

您可以使用

items

属性接受“项目提供程序功能”从远程数据库获取数据。在 API 请求中使用分页和过滤，仅获取所需的数据，例如每个请求中的 10 个项目，并在表中仅呈现 10 个项目。

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

Answer 2

我就是这样解决这个问题的。

首先，像这样扩展 Array.prototype :

Array.prototype.limitTo = function (limit) {
  this.splice(limit, this.length)
  return this
}

其次，在你的 v-for 中不要直接使用你的项目，而是使用这样的计算方法：

<tr v-for="item in limitedItems" ... >

在计算部分：

limitedItems() {
   return this.items.limitTo(this.limit)
},

在数据部分添加新属性：

data() {
  return {
    limit: 25,
    ...
  }
}

然后你需要创建一个具有固定高度和overflow-y: auto的表格包装器，就像scrollY一样：

<div ref="wrapper" @scroll="toScroll" style="height:500px;max-height:100%;overflow-y:auto">
  <table ref="content">
    ...

在方法部分：

toScroll() {
   let content = this.$refs['content']
   let wrapper = this.$refs['wrapper']
   if (wrapper.scrollTop + wrapper.offsetHeight + 700 > content.offsetHeight) { // the 700 allow to avoid a little lag when the scroll arrive at end. It allow a preload.
      this.limit += 25 // I had 20-22 rows visible at screen
   }
},

最后，不要忘记在每次重新加载/刷新/查询等时将 limit 属性重置为 25。