element-ui 使用虚拟表格

Element UI 的虚拟表格可以提高表格的渲染性能，特别是当表格中有大量数据时。它只会渲染可见的行，而不是渲染整个表格，从而大大提高了渲染速度。

要使用 Element UI 的虚拟表格，需要在表格组件中添加一个 `:virtual` 属性，并将其设置为 `true`。虚拟表格还有一些其他的属性可以设置，例如 `:item-height` 表示每行的高度，`:header-height` 表示表头的高度等。

下面是一个使用 Element UI 虚拟表格的示例代码：

<template>
  <el-table
    :data="tableData"
    :height="tableHeight"
    :row-height="rowHeight"
    :header-row-height="headerHeight"
    :virtual="true"
  >
    <el-table-column
      prop="name"
      label="Name"
    />
    <el-table-column
      prop="age"
      label="Age"
    />
    <el-table-column
      prop="address"
      label="Address"
    />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableHeight: 400,
      rowHeight: 40,
      headerHeight: 40
    };
  },
  created() {
    for (let i = 0; i < 10000; i++) {
      this.tableData.push({
        name: "John Doe",
        age: 30,
        address: "123 Main St."
      });
    }
  }
};
</script>

在这个示例中，我们创建了一个包含 10000 行数据的表格，并将 `:virtual` 属性设置为 `true`。我们还设置了每行和表头的高度，以及表格的高度。这些属性可以根据实际需要进行调整。

注意，虚拟表格只有在 `el-table` 组件的高度固定时才能正常工作。如果表格的高度可以动态改变，需要在高度改变时重新计算可见行的数量。