34 lines
1.1 KiB
Vue
34 lines
1.1 KiB
Vue
<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>
|