fix: 修复表格组件文档

FightingDesign · Dec 18, 2023 · 7ad9593 · 7ad9593
1 parent 4496dd8
commit 7ad9593
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 95 deletions.
diff --git a/docs/components/table.md b/docs/components/table.md
@@ -694,6 +694,7 @@ import type {
   TableProps,
   TableAlign,
   TableDate,
+  TableRenderReturn,
   TableColumns
 } from 'fighting-design'
 ```
@@ -704,6 +705,62 @@ import type {
 type TableAlign = 'left' | 'center' | 'right'
 ```
 
+### TableRenderReturn
+
+自定义模板函数渲染返回值类型
+
+```ts
+import type { VNode, RendererNode, RendererElement } from 'vue'
+
+type TableRenderReturn = VNode<RendererNode, RendererElement, Record<string, any>>
+```
+
+### TableRender
+
+```ts
+import type { Component, Slot, Slots, VNode } from 'vue'
+
+type Children = string | number | boolean | VNode | null | Children[]
+
+type TableRender = (
+  type: string | Component,
+  props?: object | null,
+  children?: Children | Slot | Slots | Record<string, () => unknown>
+) => TableRenderReturn | VNode
+```
+
+### TableRenderTitle
+
+```ts
+type TableRenderTitle = (
+  h: TableRender,
+  item: TableColumns,
+  index: number
+) => TableRenderReturn
+```
+
+### TableColumns
+
+```ts
+interface TableColumns {
+  title: string | TableRenderTitle
+  key?: string
+  width?: number | string | undefined
+  render?: TableRenderData
+}
+```
+
+### TableRenderData
+
+```ts
+type TableRenderData = (
+  h: TableRender,
+  row: Record<string, any>,
+  column: TableColumns,
+  index: number
+) => TableRenderReturn
+```
+
 ## Contributors
 
 <a href="https://github.com/Tyh2001" target="_blank">

diff --git a/packages/fighting-design/table/src/interface.ts b/packages/fighting-design/table/src/interface.ts
@@ -14,7 +14,7 @@ export type TableData = Record<string, any>[]
 type Children = string | number | boolean | VNode | null | Children[]
 
 /** 自定义模板函数渲染返回值类型 */
-export type RenderReturn = VNode<RendererNode, RendererElement, Record<string, any>>
+export type TableRenderReturn = VNode<RendererNode, RendererElement, Record<string, any>>
 
 /**
  * 自定义模板函数渲染类型
@@ -31,7 +31,7 @@ export type TableRender = (
   type: string | Component,
   props?: object | null,
   children?: Children | Slot | Slots | Record<string, () => unknown>
-) => RenderReturn | VNode
+) => TableRenderReturn | VNode
 
 /**
  * 渲染内容自定义模板方法类型
@@ -46,7 +46,7 @@ export type TableRenderData = (
   row: Record<string, any>,
   column: TableColumns,
   index: number
-) => RenderReturn
+) => TableRenderReturn
 
 /**
  * 渲染标题自定义模板方法类型
@@ -55,22 +55,22 @@ export type TableRenderData = (
  * @param { Object } item 每一项
  * @param { number } index 当前行的索引
  */
-export type TableRenderHeader = (
+export type TableRenderTitle = (
   h: TableRender,
   item: TableColumns,
   index: number
-) => RenderReturn
+) => TableRenderReturn
 
 /** 
- * 表格表头每一项配置类型
+ * 表格表头配置类型
  * 
  * @param { string | Function } 标题
  * @param { string } [key] 唯一值
  * @param { number | string } [width] 宽度
  * @param { Function } [render] 自定义渲染方法
  */
 export interface TableColumns {
-  title: string | TableRenderHeader
+  title: string | TableRenderTitle
   key?: string
   width?: number | string | undefined
   render?: TableRenderData

diff --git a/packages/fighting-design/table/src/table.vue b/packages/fighting-design/table/src/table.vue
@@ -8,7 +8,7 @@
   import type {
     TableColumns,
     TableRenderData,
-    TableRenderHeader,
+    TableRenderTitle,
     TableRender
   } from './interface'
 
@@ -38,7 +38,7 @@
    * @param { Function } render 渲染函数
    */
   const columnsSlotHeader = (
-    render: TableRenderHeader,
+    render: TableRenderTitle,
     item: TableColumns,
     index: number
   ): VNode => {

diff --git a/start/src/App.vue b/start/src/App.vue
@@ -1,88 +1,5 @@
-<script lang="ts" setup>
-  import { ref, h } from 'vue'
-  import { FButton } from 'fighting-design'
-  import type { TableColumns, RenderReturn } from 'fighting-design'
-  import type { VNode } from 'vue'
+<script lang="ts" setup></script>
 
-  const a = () => h('divF')
+<template></template>
 
-  const columns = ref<TableColumns[]>([
-    {
-      title: '姓名',
-      key: 'name'
-      // width: 300
-    },
-    {
-      title: '姓名',
-      key: 'name'
-      // width: 300
-    },
-    {
-      title: '姓名',
-      key: 'name'
-      // width: 300
-    },
-    {
-      // title: '年龄',
-      title: h => {
-        return h('div', { class: 'table-wrapper' }, [
-          h(FButton, { type: 'info' }, { default: () => '年龄' })
-        ])
-      },
-      key: 'age'
-      // width: 500
-    },
-    {
-      title: '介绍',
-      key: 'introduce'
-      // width: 500
-    },
-    // RenderReturn
-    {
-      title: '操作',
-      render: (h, a, v, cc) => {
-        // console.log(h, a, v, cc)
-        return h('div', { class: 'table-wrapper' }, [
-          h(FButton, { type: 'info', round: true }, { default: () => '按钮1' }),
-          h(FButton, { type: 'info' }, { default: () => '按钮2' })
-        ])
-      }
-    }
-  ])
-
-  const data = ref([
-    {
-      name: '卡莉斯塔',
-      age: '22',
-      introduce:
-        '大环境的还是决定大数据等哈就和大家安徽的就撒欢的讲话大声讲话打击很大今后的骄傲和打击很大机会大家'
-    },
-    {
-      name: '艾希',
-      age: '16',
-      introduce: '拥有强大减速和控制能力的远程射手'
-    },
-    {
-      name: '李青',
-      age: '34',
-      introduce: '非常优秀的打野英雄'
-    },
-    {
-      name: '贾克斯',
-      age: '109',
-      introduce: '取得优势的武器可以输出成吨的伤害'
-    }
-  ])
-</script>
-
-<template>
-  <!-- <f-table :data="data" num :width="1200" :columns="columns" /> -->
-  <f-table :data="data" num :columns="columns" />
-</template>
-
-<style>
-  .table-wrapper {
-    display: flex;
-    column-gap: 20px;
-  }
-</style>
+<style lang="scss" scoped></style>