elementui el-table表格数据量太大实现懒加载

Question

elementui el-table表格数据量太大实现懒加载 要求不做分页，数据量可能有200万左右

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

要实现ElementUI的el-table表格数据量太大时的懒加载，可以使用虚拟滚动（Virtual Scrolling）技术。虚拟滚动是一种性能优化技术，它只渲染当前可见区域的数据，而不是一次性渲染所有数据。这样可以大大减少DOM节点的数量，提高页面性能。

首先，你需要安装element-ui和vue-virtual-scroller这两个库：

npm install element-ui vue-virtual-scroller --save

然后，在你的Vue项目中引入这两个库，并注册为全局组件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VirtualScroller from 'vue-virtual-scroller'

Vue.use(ElementUI)
Vue.use(VirtualScroller)

接下来，你可以在你的Vue组件中使用el-table和RecycleScroller组件来实现懒加载：

<template>
  <div>
    <el-table :data="visibleData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <recycle-scroller
      class="scroller"
      :items="allData"
      :item-size="30"
      :min-view-port-items="5"
      @change="handleScroll"
    ></recycle-scroller>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData: [], // 假设这里是全部的数据，大约200万条
      visibleData: [], // 当前可见的数据
      startIndex: 0, // 当前可见数据的起始索引
      endIndex: 0, // 当前可见数据的结束索引
    }
  },
  methods: {
    handleScroll(event) {
      const { startIndex, endIndex } = event.range
      this.startIndex = startIndex
      this.endIndex = endIndex
      this.visibleData = this.allData.slice(startIndex, endIndex + 1)
    },
  },
  mounted() {
    this.handleScroll({ range: { startIndex: 0, endIndex: 49 } }) // 初始化时加载前50条数据
  },
}
</script>

在这个例子中，我们使用了RecycleScroller组件来实现虚拟滚动。当用户滚动时，handleScroll方法会被触发，根据滚动的范围计算出当前可见数据的起始索引和结束索引，然后从allData中截取这部分数据赋值给visibleData。这样，只有当前可见的数据会被渲染到页面上，大大提高了性能。