feat:Ag Grid Study

src/modules/home/PageHome.vue

@@ -6,17 +6,31 @@
 <script setup lang="ts">
 import { reactive, onMounted } from 'vue';
 import { AgGridVue } from 'ag-grid-vue3';
-import type { GridOptions } from 'ag-grid-community';
+import type {
+  GridOptions,
+  ValueFormatterParams,
+  ValueFormatterFunc,
+} from 'ag-grid-community';
 
 // Ag Grid
 const gridOptions: GridOptions<any> = reactive({
   rowModelType: 'serverSide',
+  cacheBlockSize: 50, // 这将块大小设置为50，因此每次回读50行。
+  maxBlocksInCache: 2, // 这意味着网格将只在内存中保留两个块。
+
   suppressContextMenu: true, // 阻止“右键单击”上下文菜单
   suppressCellFocus: true, // 阻止单元格聚焦，这意味着键盘导航将对网格单元格禁用
   defaultColDef: {
     suppressMenu: true, // 阻止此列标头菜单显示
   },
   columnDefs: [
+    {
+      headerName: '序号',
+      maxWidth: 80,
+      valueFormatter: (params: ValueFormatterParams): ValueFormatterFunc => {
+        //
+      },
+    },
     { headerName: '运动员', field: 'athlete', minWidth: 170 },
     { headerName: '年龄', field: 'age' },
     { headerName: '国家', field: 'country' },