element-plus 的 el-table-v2 虚拟化表格 的使用

<template>
  <el-table-v2
    :data="tableData"
    :height="200"
    :width="300"
    :estimated-total="1000"
  >
    <el-table-v2-column
      type="index"
      width="100"
    ></el-table-v2-column>
    <el-table-v2-column
      prop="date"
      label="日期"
      width="200"
    ></el-table-v2-column>
    <el-table-v2-column
      prop="name"
      label="姓名"
      width="200"
    ></el-table-v2-column>
    <el-table-v2-column
      prop="address"
      label="地址"
    ></el-table-v2-column>
  </el-table-v2>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const tableData = ref(Array.from({ length: 1000 }).map((_, index) => ({
      date: '2016-05-02',
      name: `John ${index}`,
      address: `No. ${index} Lake Park`,
    })));
 
    return {
      tableData,
    };
  },
};
</script>

这个例子中，我们创建了一个包含1000条数据的虚拟表格。el-table-v2组件通过:data属性接收数据，并通过:height和:width属性设置了表格的高度和宽度。estimated-total属性用于告诉表格总数据量的大概信息，以便更好地进行性能优化。这个例子展示了如何使用el-table-v2组件创建一个虚拟化的表格，并且如何使用el-table-v2-column定义表格的列结构。