虚拟化表格 TableV2

使用 Arco Table 配色与单元格间距，保留 Element Plus 虚拟化表格结构。 属性用法见 Element Plus 文档。

大量数据

生成 1000 行数据并设置固定高度，通过虚拟滚动浏览。

1

User 1

Platform

2

User 2

Platform

3

User 3

Platform

<script setup lang="ts">
const columns = [
  { key: 'id', dataKey: 'id', title: 'ID', width: 100 },
  { key: 'name', dataKey: 'name', title: 'Name', width: 200 },
  { key: 'team', dataKey: 'team', title: 'Team', width: 200 },
]
const data = Array.from({ length: 1000 }, (_, index) => ({ id: index + 1, name: `User ${index + 1}`, team: 'Platform' }))
</script>

<template>
  <div style="width: 100%; height: 300px">
    <el-auto-resizer>
      <template #default="{ width, height }">
        <el-table-v2 :columns="columns" :data="data" :width="width" :height="height" :row-height="40" :header-height="40" />
      </template>
    </el-auto-resizer>
  </div>
</template>

与 Arco 的差异

• 行高和表头默认都是 50px；可通过 row-height 与 header-height 调整为 40px。