fix: 修复 f-table 组件类型

packages/fighting-design/table/src/interface.ts

@@ -1,41 +1,79 @@
-import type { Component, Slot, Slots, VNode } from 'vue'
+import type { Component, Slot, Slots, VNode, RendererNode, RendererElement } from 'vue'
 
 export type { TableProps } from './props'
 
 /** 表格居中方式类型 */
 export type TableAlign = 'left' | 'center' | 'right'
 
 /** 表格数据类型 */
-export type TableData = Record<string, unknown>[]
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TableData = Record<string, any>[]
 
 /**
  * @see h() https://cn.vuejs.org/api/render-function.html
  */
 type Children = string | number | boolean | VNode | null | Children[]
 
-export type TableRenderH = (
+/** 自定义模板函数渲染返回值类型 */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type RenderReturn = VNode<RendererNode, RendererElement, Record<string, any>>
+
+/**
+ * 自定义模板函数渲染类型
+ * 
+ * 详情参考
+ * 
+ * @see h() https://cn.vuejs.org/api/render-function.html
+ * 
+ * @param { string | Object } type 类型
+ * @param { Object } props props 传参数
+ * @param { Object } children 子节点
+ */
+export type TableRender = (
   type: string | Component,
   props?: object | null,
   children?: Children | Slot | Slots | Record<string, () => unknown>
-) => VNode
+) => RenderReturn | VNode
 
-export type TableRender = (
-  h: TableRenderH,
-  dataItem: Record<string, unknown>,
-  index: number,
-  headerItem: TableColumns
-) => VNode
-
-export type TableHeaderRender = (
-  h: TableRenderH,
-  headerItem: TableColumns,
+/**
+ * 渲染内容自定义模板方法类型
+ * 
+ * @param { Function } h 渲染函数
+ * @param { Object } row 行的每一项
+ * @param { Object } column 列的每一项
+ * @param { number } index 当前行的索引
+ */
+export type TableRenderData = (
+  h: TableRender,
+  row: Record<string, any>,
+  column: TableColumns,
+  index: number
+) => RenderReturn
+
+/**
+ * 渲染标题自定义模板方法类型
+ * 
+ * @param { Function } h 渲染函数
+ * @param { Object } item 每一项
+ * @param { number } index 当前行的索引
+ */
+export type TableRenderHeader = (
+  h: TableRender,
+  item: TableColumns,
   index: number
-) => VNode
+) => RenderReturn
 
-/** 表格表头每一项配置类型 */
+/** 
+ * 表格表头每一项配置类型
+ * 
+ * @param { string | Function } 标题
+ * @param { string } [key] 唯一值
+ * @param { number | string } [width] 宽度
+ * @param { Function } [render] 自定义渲染方法
+ */
 export interface TableColumns {
-  title: string | TableHeaderRender
+  title: string | TableRenderHeader
   key?: string
   width?: number | string | undefined
-  render?: TableRender
+  render?: TableRenderData
 }

packages/fighting-design/table/src/table.vue

@@ -2,14 +2,15 @@
   import { Props } from './props'
   import { h } from 'vue'
   import { useList } from '../../_hooks'
+  // import { FEmpty } from '../../empty'
   import { TableColgroupVue } from '../components'
   import { isFunction } from '../../_utils'
   import type { VNode } from 'vue'
   import type {
     TableColumns,
-    TableRender,
-    TableHeaderRender,
-    TableRenderH
+    TableRenderData,
+    TableRenderHeader,
+    TableRender
   } from './interface'
 
   defineOptions({ name: 'FTable' })
@@ -24,20 +25,25 @@
    * @param { Function } render 渲染函数
    */
   const columnsSlotData = (
-    slotRender: TableRender,
-    dataItem: Record<string, unknown>,
-    index: number,
-    headerItem: TableColumns
+    render: TableRenderData,
+    row: Record<string, any>,
+    column: TableColumns,
+    index: number
   ): VNode => {
-    return slotRender(h as TableRenderH, dataItem, index, headerItem)
+    return render(h as TableRender, row, column, index)
   }
 
+  /**
+   * 处理自定义渲染内容
+   *
+   * @param { Function } render 渲染函数
+   */
   const columnsSlotHeader = (
-    headerRender: TableHeaderRender,
-    headerItem: TableColumns,
+    render: TableRenderHeader,
+    item: TableColumns,
     index: number
   ): VNode => {
-    return headerRender(h as TableRenderH, headerItem, index)
+    return render(h as TableRender, item, index)
   }
 
   /** 样式列表 */
@@ -78,6 +84,7 @@
 
         <!-- 身体 -->
         <main class="f-table__body">
+          <!-- 有数据 -->
           <table class="f-table__table">
             <table-colgroup-vue :columns="columns" />
 
@@ -100,7 +107,7 @@
             </thead>
 
             <!-- 主要渲染内容的表体 -->
-            <tbody v-if="data.length" :align="align">
+            <tbody v-if="data && data.length" :align="align">
               <tr v-for="(item, m) in data" :key="m">
                 <!-- 序号列表 -->
                 <td v-if="num">{{ m + 1 }}</td>
@@ -109,7 +116,7 @@
                 <td v-for="(column, i) in columns" :key="i">
                   <!-- 如果有自定义插槽渲染 -->
                   <template v-if="column.render">
-                    <component :is="columnsSlotData(column.render, item, m, column)" />
+                    <component :is="columnsSlotData(column.render, item, column, m)" />
                   </template>
 
                   <!-- 普通渲染数据 -->
@@ -122,6 +129,13 @@
               </tr>
             </tbody>
 
+            <!-- 没有数据 -->
+            <!-- <tfoot v-else>
+              <slot>
+                <f-empty content="暂无数据" />
+              </slot>
+            </tfoot> -->
+
             <!-- 自定义也叫 -->
             <tfoot v-if="$slots.tfoot">
               <slot name="tfoot" />

start/src/App.vue

@@ -1,23 +1,34 @@
 <script lang="ts" setup>
-  import { ref } from 'vue'
+  import { ref, h } from 'vue'
   import { FButton } from 'fighting-design'
+  import type { TableColumns, RenderReturn } from 'fighting-design'
+  import type { VNode } from 'vue'
 
-  const columns = ref([
+  const a = () => h('divF')
+
+  const columns = ref<TableColumns[]>([
     {
       title: '姓名',
       key: 'name'
     },
     {
-      title: '年龄',
+      // title: '年龄',
+      title: h => {
+        return h('div', { class: 'table-wrapper' }, [
+          h(FButton, { type: 'info' }, { default: () => '按钮1' })
+        ])
+      },
       key: 'age'
     },
     {
       title: '介绍',
       key: 'introduce'
     },
+    // RenderReturn
     {
-      name: '操作',
-      render: h => {
+      title: '操作',
+      render: (h, a, v, cc) => {
+        console.log(h, a, v, cc)
         return h('div', { class: 'table-wrapper' }, [
           h(FButton, { type: 'info' }, { default: () => '按钮1' }),
           h(FButton, { type: 'info' }, { default: () => '按钮2' })