el-table 做虚拟列表

el-table 是 Element UI 中的一个表格组件，通过使用 dynamic-row-height 和 estimated-row-height 属性可以实现虚拟列表的效果。

dynamic-row-height 属性会根据表格数据自动计算每行的高度，而不是使用固定的行高。这样可以避免在渲染大量数据时占用过多的内存。

estimated-row-height 属性可以设置表格的估计行高，用于计算表格的滚动高度。这样可以在滚动时更加流畅，避免出现卡顿或者滚动不流畅的情况。

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

<template>
  <el-table
    :data="tableData"
    :height="tableHeight"
    :row-key="row => row.id"
    :dynamic-row-height="true"
    :estimated-row-height="50"
  >
    <el-table-column
      prop="name"
      label="姓名"
    >
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄"
    >
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
    >
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableHeight: 400
    }
  },
  created() {
    // 模拟生成大量数据
    for (let i = 0; i < 10000; i++) {
      this.tableData.push({
        id: i,
        name: `用户 ${i}`,
        age: Math.floor(Math.random() * 80) + 20,
        address: `地址 ${i}`
      })
    }
  }
}
</script>

在这个示例中，我们设置了动态行高和估计行高，并且添加了大量的虚拟数据。在表格滚动时，可以看到数据是按需渲染的，而不是一次性渲染整个表格，这样可以提高页面的性能和响应速度。