表格

2023-12-22 16:19:33 +08:00
parent 3a465769bc
commit 99e4efd83e
14 changed files with 2549 additions and 2 deletions
--- a/types/table.d.ts
+++ b/types/table.d.ts
@@ -0,0 +1,93 @@
+import Table from '@/components/table/index.vue'
+import { Component } from 'vue'
+
+import type { PopconfirmProps, ButtonType, FormInstance, ButtonProps, TableColumnCtx, ColProps } from 'element-plus'
+import { Mutable } from 'element-plus/es/utils'
+
+declare global {
+    interface CnTable {
+        ref: typeof Table | null
+        data: TableRow[]
+        // 表格加载状态
+        loading: boolean
+        // 当前选中行
+        selection: TableRow[]
+        // 表格列定义
+        column: TableColumn[]
+        // 数据总量
+        total: number
+        params: {
+            pageNum?: number
+            pageSize?: number
+            [key: string]: any
+        }
+    }
+
+    /* 表格行 */
+    interface TableRow extends anyObj {
+        children?: TableRow[]
+    }
+
+    /* 表格列 */
+    interface TableColumn extends Partial<TableColumnCtx<TableRow>> {
+        render?:
+            | 'icon'
+            | 'switch'
+            | 'image'
+            | 'tag'
+            | 'datetime'
+            | 'color'
+            | 'buttons'
+            | 'slot'
+            | 'customTemplate'
+            | 'customRender'
+        // 默认值
+        default?: any
+        // 操作按钮组
+        buttons?: OptButton[]
+        // 自定义数据:比如渲染为Tag时,可以指定不同值时的Tag的Type属性 { open: 'success', close: 'info' }
+        custom?: any
+        // 值替换数据,如{open: '开'}
+        replaceValue?: any
+        // 时间格式化
+        timeFormat?: string
+        // 自定义组件/函数渲染
+        customRender?: string | Component
+        // 使用了 render 属性时,渲染前对字段值的预处理方法，请返回新值
+        renderFormatter?: (
+            row: TableRow,
+            field: TableColumn,
+            value: any,
+            column: TableColumnCtx<TableRow>,
+            index: number
+        ) => any
+        // 自定义渲染模板，方法可返回html内容
+        customTemplate?: (
+            row: TableRow,
+            field: TableColumn,
+            value: any,
+            column: TableColumnCtx<TableRow>,
+            index: number
+        ) => string
+    }
+
+    /* 表格右侧操作按钮 */
+    interface OptButton {
+        // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮,basicButton=普通按钮
+        render: 'tipButton' | 'confirmButton' | 'moveButton' | 'basicButton'
+        name: string
+        title?: string
+        text?: string
+        class?: string
+        type: ButtonType
+        icon: string
+        popconfirm?: Partial<Mutable<PopconfirmProps>>
+        disabledTip?: boolean
+        // 自定义点击事件
+        click?: (row: TableRow, field: TableColumn) => void
+        // 按钮是否禁用，请返回布尔值
+        disabled?: (row: TableRow, field: TableColumn) => boolean
+        // 自定义el-button属性
+        attr?: Partial<Mutable<ButtonProps>>
+    }
+}