u

code/g3soft-libs/docs/examples/table/virtual.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { G3Table } from '@g3soft/ui'
+import type { G3TableColumn, TableRow } from '@g3soft/ui'
+
+// 性能门控：行数超过 100 才开启纵向虚拟滚动。
+// 组件内部按 dataSource.length 自动判断，业务不需要手动切换 virtual。
+const rowCount = ref(5000)
+const virtualColumns: G3TableColumn<TableRow>[] = [
+  { dataIndex: 'id', title: 'ID', width: 90 },
+  { dataIndex: 'name', title: '名称', width: 200 },
+  { dataIndex: 'value', title: '数值', width: 140, align: 'right' },
+]
+
+const virtualData = computed(() =>
+  Array.from({ length: rowCount.value }, (_, i) => ({
+    id: i + 1,
+    name: `记录 ${i + 1}`,
+    value: (i + 1) * 7,
+  })),
+)
+</script>
+
+<template>
+  <div>
+    <p style="margin: 0 0 8px; color: #666; font-size: 13px">
+      当前 {{ rowCount }} 行 → {{ rowCount > 100 ? '已开启' : '未开启（行数不足 100 时全量渲染）' }}纵向虚拟滚动
+    </p>
+    <div style="height: 320px">
+      <G3Table :columns="virtualColumns" :data-source="virtualData" :seq="false" />
+    </div>
+  </div>
+</template>