大量数据el-tabel的虚拟滚动

Element UI 的 el-table 组件目前还不原生支持虚拟滚动。虚拟滚动是一种优化技术，可以在大量数据的情况下，只渲染可视区域的内容，而不是整个数据集。这有助于提高页面性能，减少渲染时间和内存占用。

虽然 Element UI 的 el-table 组件本身不支持虚拟滚动，但你可以通过一些额外的工作来实现虚拟滚动的效果。主要思路是通过设置 el-table 的高度，并在其内部使用滚动容器，监听滚动事件，动态地渲染可视区域的数据。

以下是一种基本的实现思路：

1. 设置 el-table 的高度，并将其放置在一个具有固定高度的容器中。
2. 使用滚动容器包裹 el-table，并监听滚动事件。
3. 根据滚动位置计算出当前可视区域的数据，并将其渲染到 el-table 中。
4. 如果数据量很大，可以使用分页加载等技术，进一步优化性能。

这里提供一个简单的示例代码，演示如何通过监听滚动事件来实现虚拟滚动

<template>
  <div class="table-container" ref="container" style="height: 300px; overflow-y: auto;">
    <el-table :data="visibleData" :height="tableHeight">
      <!-- el-table 的列定义 -->
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 所有数据
      visibleData: [], // 当前可视区域的数据
      tableHeight: 300, // el-table 的高度
    };
  },
  mounted() {
    // 模拟异步加载数据
    this.fetchData();
    // 监听滚动事件
    this.$refs.container.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    // 移除滚动事件监听
    this.$refs.container.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    fetchData() {
      // 模拟异步加载数据
      // 例如通过接口请求数据
      setTimeout(() => {
        this.tableData = [/* your data */];
        // 初始化时渲染可视区域的数据
        this.updateVisibleData();
      }, 500);
    },
    handleScroll() {
      // 更新可视区域的数据
      this.updateVisibleData();
    },
    updateVisibleData() {
      // 获取 el-table 的 tbody 元素
      const tbody = this.$refs.container.querySelector('.el-table__body-wrapper tbody');
      if (!tbody) return;

      // 计算可视区域的索引范围
      const containerTop = tbody.getBoundingClientRect().top;
      const rows = tbody.children;
      let startIndex = -1;
      let endIndex = -1;
      let totalHeight = 0;
      for (let i = 0; i < rows.length; i++) {
        const row = rows[i];
        const rowHeight = row.getBoundingClientRect().height;
        totalHeight += rowHeight;
        if (totalHeight >= containerTop && startIndex === -1) {
          startIndex = i;
        }
        if (totalHeight >= containerTop + this.tableHeight && endIndex === -1) {
          endIndex = i;
          break;
        }
      }
      // 截取可视区域的数据
      this.visibleData = this.tableData.slice(startIndex, endIndex);
    },
  },
};
</script>

在这个示例中，我们通过动态计算每一行的高度，然后根据可视区域的高度来确定可视区域的数据范围。这样即使行高不固定，也能实现虚拟滚动的效果。请注意，这个示例假设 el-table 的行是由 tbody 元素的子元素表示的。在实际应用中，你可能需要根据实际情况对代码进行调整。