u

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

@@ -3,13 +3,14 @@ import { computed, ref } from 'vue'
 import { G3Table } from '@g3soft/ui'
 import type { G3TableColumn, TableRow } from '@g3soft/ui'
 
-// 性能门控：行数超过 100 才开启纵向虚拟滚动。
-// 组件内部按 dataSource.length 自动判断，业务不需要手动切换 virtual。
+// 性能门控：行数 > 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' },
+  { dataIndex: 'value', title: '数值', width: 140, align: 'right', sorter: true, sortType: 'number' },
 ]
 
 const virtualData = computed(() =>
@@ -24,9 +25,11 @@ const virtualData = computed(() =>
 <template>
   <div>
     <p style="margin: 0 0 8px; color: #666; font-size: 13px">
-      当前 {{ rowCount }} 行 → {{ rowCount > 100 ? '已开启' : '未开启（行数不足 100 时全量渲染）' }}纵向虚拟滚动
+      当前 {{ rowCount }} 行 →
+      {{ rowCount > 100 ? '已开启' : '未开启（行数不足 100 时全量渲染）' }}纵向虚拟滚动
     </p>
-    <div style="height: 320px">
+    <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>