37 lines
1.3 KiB
Vue
37 lines
1.3 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', sorter: true, sortType: 'number' },
|
|
]
|
|
|
|
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>
|
|
<input v-model.number="rowCount" type="range" min="10" max="5000" step="10" />
|
|
<div style="height: 320px; margin-top: 8px">
|
|
<G3Table :columns="virtualColumns" :data-source="virtualData" :seq="false" />
|
|
</div>
|
|
</div>
|
|
</template>
|