table表格完成虚拟滚动，需求可视区域上下各预留10条数据，可使用vue2，ts

要实现虚拟滚动，需要使用到以下两个概念：

1. 可视区域：用户当前能看到的部分。
2. 缓冲区域：可视区域上下各预留的区域，用于提前加载数据，避免滚动时频繁加载数据。

下面是一个基本的思路：

1. 定义一个固定高度的容器，作为可视区域。
2. 根据数据总数和每条数据的高度，计算出容器的总高度。
3. 根据容器高度和每条数据的高度，计算出能容纳的数据条数。
4. 根据容器高度和每条数据的高度，计算出缓冲区域的高度。
5. 根据可视区域的高度和缓冲区域的高度，计算出容器需要显示的数据范围。
6. 使用 v-for 渲染需要显示的数据范围内的数据。

下面是一个简单的示例代码：

<template>
  <div class="container" :style="{ height: containerHeight + 'px' }" @scroll="handleScroll">
    <div class="content" :style="{ height: contentHeight + 'px' }">
      <div v-for="(item, index) in visibleData" :key="index" class="item" :style="{ height: itemHeight + 'px' }">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Table extends Vue {
  private data = [/* 数据数组 */];
  private itemHeight = 30; // 每条数据的高度
  private visibleCount = 20; // 可视区域能容纳的数据条数
  private bufferCount = 10; // 缓冲区域的数据条数

  get containerHeight() {
    return (this.visibleCount + 2 * this.bufferCount) * this.itemHeight;
  }

  get contentHeight() {
    return this.data.length * this.itemHeight;
  }

  get visibleData() {
    const start = Math.max(0, Math.floor(this.$el.scrollTop / this.itemHeight) - this.bufferCount);
    const end = Math.min(this.data.length, start + this.visibleCount + 2 * this.bufferCount);
    return this.data.slice(start, end);
  }

  handleScroll() {
    /* 处理滚动事件，可选 */
  }
}
</script>

注意，这里的 `visibleData` 是一个计算属性，它根据当前容器的滚动位置和显示范围，返回需要显示的数据范围内的数据。在模板中，我们使用 `v-for` 渲染这些数据。

以上是一个简单的实现方式，你可以根据实际需求进行修改和扩展。