vue 原生table实现虚拟滚动

Vue原生表格实现虚拟滚动通常是为了优化大数据量下页面的性能。当数据量非常大时，一次性加载所有数据会占用过多内存，并可能导致页面卡顿。通过虚拟滚动技术，我们只需要在视口内渲染可见的数据行，其余部分则仅保留必要的DOM节点。

在Vue中，可以利用`v-for`指令配合`chunk-size`或`item-per-page`等计算属性，将数据拆分成多个块或页，然后动态地创建和销毁这部分表格行。当用户滚动时，只加载新的数据块，从而减少内存消耗。

例如：

<table>
  <tbody v-virtual-scroll="items" :item-height="rowHeight">
    <tr v-for="(item, index) in $refs.tableBody.$children.slice(start, Math.min(start + pageSize))" :key="index">
      <!-- 表格内容 -->
    </tr>
  </tbody>
</table>

<script>
export default {
  data() {
    return {
      items: [], // 数据源
      rowHeight: 50, // 每行高度
      start: 0, // 当前开始索引
      pageSize: 10 // 每次加载的行数
    };
  },
  computed: {
    // 根据滚动位置计算需要加载的数据范围
    visibleDataRange() {
      const scrollTop = this.$refs.tableBody.scrollTop;
      const scrollHeight = this.$refs.tableBody.scrollHeight - this.$refs.tableBody.clientHeight;
      const clientTop = this.$refs.tableBody.clientTop;
      const bottomVisibleRow = scrollTop + scrollHeight - clientTop;
      const topVisibleRow = scrollTop;

      return { start: Math.floor((topVisibleRow - clientTop) / this.rowHeight), end: Math.ceil(bottomVisibleRow / this.rowHeight) };
    }
  },
  mounted() {
    this.loadInitialData();
  },
  methods: {
    loadInitialData() {
      this.start = 0; // 加载初始数据
      this.loadMoreData();
    },
    loadMoreData() {
      if (this.start + this.pageSize >= this.items.length) return; // 如果已无更多数据，则停止加载

      // 加载新数据并更新start
      const newData = this.items.slice(this.start, this.start + this.pageSize);
      this.start += this.pageSize;

      // 更新列表
      this.items = [...this.items, ...newData];
    }
  }
};
</script>