Merge pull request #13 from jsxiaosi/fix/type-check

fix(components): 🐛 table ts type error

Author: jsxiaosi

package.json

@@ -133,7 +133,7 @@
     "vite-plugin-svg-icons": "^2.0.1",
     "vitest": "^2.1.8",
     "vue-eslint-parser": "^9.4.3",
-    "vue-tsc": "^2.1.10",
+    "vue-tsc": "^2.2.0",
     "xlsx": "^0.18.5"
   },
   "pnpm": {

pnpm-lock.yaml

@@ -2,17 +2,19 @@
   import { ElTable } from 'element-plus';
   import type { TableProps } from 'element-plus';
   import TableChild from './src/components/TableChild';
-  import type { TableColumnProps } from './types/table';
+  import type { TableColumnProps, TableSlotType } from './types/table';
 
   const props = defineProps<TableProps<T> & { option: TableColumnProps<T>[] }>();
+
+  defineSlots<TableSlotType<T>>();
 </script>
 
 <template>
   <div>
     <ElTable v-bind="{ ...props, ...$attrs }" :data="data" :border="border" fit show-header>
       <TableChild v-for="(item, index) in option" :key="index" :item="item">
-        <template v-for="soitem in Object.keys($slots)" #[soitem]="data">
-          <slot :name="soitem" v-bind="data" />
+        <template v-for="slotsItem in Object.keys($slots)" #[slotsItem]="data">
+          <slot :name="slotsItem" v-bind="data" />
         </template>
       </TableChild>
     </ElTable>

src/components/Table/index.vue

@@ -1,7 +1,7 @@
 import { getSlot } from '@/utils/slotsHelper';
 import { ElTableColumn } from 'element-plus';
 import { defineComponent } from 'vue';
-import type { TableColumnCtx } from 'element-plus';
+import type { TableColumnInstance } from 'element-plus';
 import type { SetupContext, VNode } from 'vue';
 import type { TableColumnProps } from '../../types/table';
 
@@ -10,17 +10,18 @@ interface RenderType {
   header?: (scope: Recordable) => VNode[] | VNode | null;
 }
 
+// TODO: header 存在children时，slots 无法渲染
 const TableChild = defineComponent(
   <T extends object = any>(props: { item: TableColumnProps<T> }, { slots }: SetupContext) => {
     const { item } = props;
 
     function eLComponent(childrenRender: RenderType | null | undefined = null) {
       const { children, ...reItem } = item;
       if (childrenRender?.default) {
-        return <ElTableColumn {...(reItem as TableColumnCtx<Recordable>)}>{childrenRender}</ElTableColumn>;
+        return <ElTableColumn {...(reItem as TableColumnInstance)}>{childrenRender}</ElTableColumn>;
       } else {
         return (
-          <ElTableColumn {...(reItem as TableColumnCtx<Recordable>)}>
+          <ElTableColumn {...(reItem as TableColumnInstance)}>
             {childrenRender?.header}
             {children?.map(child => <TableChild item={child} />)}
           </ElTableColumn>

src/components/Table/src/components/TableChild.tsx

@@ -1,4 +1,4 @@
-import type { TableColumnCtx } from 'element-plus';
+import type { RenderRowData, TableColumnCtx } from 'element-plus';
 
 export interface TableColumnProps<T extends Recordable = Recordable>
   extends Partial<Omit<TableColumnCtx<T>, 'prop' | 'children'>> {
@@ -8,3 +8,17 @@ export interface TableColumnProps<T extends Recordable = Recordable>
   render_header?: (row: any) => JSX.Element;
   children?: TableColumnProps<T>[];
 }
+
+// export type TableSlotType<T extends object = object> = {
+//   [key in keyof T as `${string & key}_header`]: (props: any) => void;
+// };
+
+export type TableSlotType<T extends object = object> = {
+  [key in keyof T]: (props: RenderRowData<T>) => void;
+} & {
+  [key in keyof T as `${string & key}_header`]: (
+    props: Omit<RenderRowData<T>, 'row' | 'treeNode' | 'expanded'> & {
+      customItem: TableColumnProps<T>;
+    },
+  ) => void;
+};

src/components/Table/types/table.ts

@@ -127,6 +127,7 @@
           <span>表格</span>
         </div>
       </template>
+
       <Table :data="tabList" border row-key="date" :option="option">
         <template #name_header="slotData">
           <span>{{ `插槽：${slotData.customItem.label}` }}</span>