types: 为useVbenVxeGrid添加泛型声明,使grid实例上能正确获取到行数据的类型 (#5653)

Co-authored-by: Jin Mao <50581550+jinmao88@users.noreply.github.com>

playground/src/adapter/vxe-table.ts

@@ -1,10 +1,15 @@
 import type { Recordable } from '@vben/types';
 
+import type { ComponentType } from './component';
+
 import { h } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 import { $te } from '@vben/locales';
-import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
+import {
+  setupVbenVxeTable,
+  useVbenVxeGrid as useGrid,
+} from '@vben/plugins/vxe-table';
 import { get, isFunction, isString } from '@vben/utils';
 
 import { objectOmit } from '@vueuse/core';
@@ -277,7 +282,10 @@ setupVbenVxeTable({
   useVbenForm,
 });
 
-export { useVbenVxeGrid };
+export const useVbenVxeGrid = <T extends Record<string, any>>(
+  ...rest: Parameters<typeof useGrid<T, ComponentType>>
+) => useGrid<T, ComponentType>(...rest);
+
 export type OnActionClickParams<T = Recordable<any>> = {
   code: string;
   row: T;

playground/src/views/examples/vxe-table/basic.vue

@@ -43,7 +43,22 @@ const gridEvents: VxeGridListeners<RowType> = {
   },
 };
 
-const [Grid, gridApi] = useVbenVxeGrid({ gridEvents, gridOptions });
+const [Grid, gridApi] = useVbenVxeGrid<RowType>({
+  // 放开注释查看表单组件的类型
+  // formOptions: {
+  //   schema: [
+  //     {
+  //       component: 'Switch',
+  //       fieldName: 'name',
+  //     },
+  //   ],
+  // },
+  gridEvents,
+  gridOptions,
+});
+
+// 放开注释查看当前表格实例的类型
+// gridApi.grid
 
 const showBorder = gridApi.useStore((state) => state.gridOptions?.border);
 const showStripe = gridApi.useStore((state) => state.gridOptions?.stripe);