/** * Table Types & Props * @description 高性能表格组件类型定义 * 融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长 */ import type { ExtractPropTypes, PropType, InjectionKey, CSSProperties, VNode, Component, VNodeChild } from 'vue'; import type { TooltipPlacement } from '../../tooltip'; export type TableSize = 'large' | 'default' | 'small'; export type TableAlign = 'left' | 'center' | 'right'; export type SortOrder = 'asc' | 'desc' | null; export type FixedPosition = 'left' | 'right' | true; export type RowKey = string | ((row: Record) => string | number); export type SelectionType = 'checkbox' | 'radio'; export type TreeExpandTrigger = 'cell' | 'row' | 'default'; export interface TableColumn> { /** 列唯一标识 */ key?: string; /** 列字段名 */ prop?: string; /** 列标题 */ label?: string; /** 列宽 */ width?: number | string; /** 最小列宽 */ minWidth?: number | string; /** 最大列宽 */ maxWidth?: number | string; /** 内容对齐方式 */ align?: TableAlign; /** 表头对齐方式 */ headerAlign?: TableAlign; /** 固定列 */ fixed?: FixedPosition; /** 是否可排序 */ sortable?: boolean | 'custom'; /** 默认排序 */ defaultSort?: SortOrder; /** 排序方法 */ sortMethod?: (a: T, b: T, order: SortOrder) => number; /** 是否可筛选 */ filterable?: boolean; /** 筛选选项 */ filters?: Array<{ text: string; value: unknown; }>; /** 筛选方法 */ filterMethod?: (value: unknown, row: T, column: TableColumn) => boolean; /** 是否支持多选筛选 */ filterMultiple?: boolean; /** 是否可调整列宽 */ resizable?: boolean; /** 是否可拖拽排序 */ draggable?: boolean; /** 是否显示溢出提示 */ showOverflowTooltip?: boolean | { effect?: 'dark' | 'light'; placement?: TooltipPlacement; offset?: number; }; /** 列类名 */ className?: string; /** 表头类名 */ headerClassName?: string; /** 列样式 */ style?: CSSProperties; /** 表头样式 */ headerStyle?: CSSProperties; /** 是否可见 */ visible?: boolean; /** 子列(分组表头) */ children?: TableColumn[]; /** 列类型 */ type?: 'selection' | 'index' | 'expand' | 'radio'; /** 自定义渲染 */ render?: (params: { row: T; column: TableColumn; rowIndex: number; cellValue: unknown; }) => VNodeChild | string; /** 自定义表头渲染 */ headerRender?: (params: { column: TableColumn; columnIndex: number; }) => VNodeChild | string; /** 表头前缀图标 */ headerPrefixIcon?: string | Component; /** 表头后缀图标 */ headerSuffixIcon?: string | Component; /** 格式化方法 */ formatter?: (row: T, column: TableColumn, cellValue: unknown, rowIndex: number) => string; /** 合并单元格 */ colSpan?: number; /** 自定义排序字段 */ sortBy?: string | ((row: T) => unknown); /** 是否为树形展开列 */ treeNode?: boolean; /** 省略号配置 */ ellipsis?: boolean | { tooltip?: boolean; lineClamp?: number; }; /** * 非编辑态显示文案映射。 * - 当列没有 formatter 时,Table 会优先使用该映射把值转换成可读文本。 * - key 使用 String(value) 进行匹配(支持 boolean/number/string)。 * 例:{ 'true': '是', 'false': '否' } / { '1': '男', '2': '女' } */ displayMap?: Record; } export interface TableSortConfig { /** 默认排序列 */ defaultSort?: { prop: string; order: SortOrder; }; /** 多列排序 */ multiple?: boolean; /** 排序触发方式 */ trigger?: 'cell' | 'header'; /** 远程排序 */ remote?: boolean; /** 排序图标位置 */ iconPosition?: 'left' | 'right'; /** 自定义排序方法合集 */ sortMethods?: Record, b: Record, order: SortOrder) => number>; } export interface TableFilterConfig { /** 是否远程筛选 */ remote?: boolean; /** 筛选图标 */ icon?: string | Component; /** 筛选面板最大高度 */ maxHeight?: number | string; /** 筛选面板宽度 */ width?: number | string; } export interface TablePaginationConfig { /** 当前页码 */ currentPage?: number; /** 每页条数 */ pageSize?: number; /** 总条数 */ total?: number; /** 每页条数选项 */ pageSizes?: number[]; /** 分页布局 */ layout?: string; /** 分页位置 */ position?: 'top' | 'bottom' | 'both'; /** 后台分页 */ remote?: boolean; /** 小型分页 */ small?: boolean; /** 分页背景 */ background?: boolean; /** 隐藏单页 */ hideOnSinglePage?: boolean; /** 对齐方式 */ align?: 'left' | 'center' | 'right'; } export interface TableSelectionConfig> { /** 选择类型 */ type?: SelectionType; /** 已选中的行 */ selectedRowKeys?: Array; /** 是否保留选中项 */ reserve?: boolean; /** 选择变化回调 */ onChange?: (selectedRowKeys: Array, selectedRows: T[]) => void; /** 行是否可选 */ checkable?: (row: T, rowIndex: number) => boolean; /** 全选时的行为 */ selectAllMode?: 'all' | 'currentPage'; /** 复选框列宽 */ columnWidth?: number | string; /** 是否显示全选 */ showSelectAll?: boolean; } export interface TableExpandConfig> { /** 默认展开行的 key */ defaultExpandedRowKeys?: Array; /** 展开所有行 */ expandAll?: boolean; /** 手风琴模式 */ accordion?: boolean; /** 展开图标位置 */ iconPosition?: 'left' | 'right'; /** 展开内容渲染 */ render?: (params: { row: T; rowIndex: number; }) => VNode; /** 行是否可展开 */ expandable?: (row: T, rowIndex: number) => boolean; /** 展开列宽 */ columnWidth?: number | string; /** 展开行变化回调 */ onChange?: (expandedRowKeys: Array) => void; } export interface TableTreeConfig { /** 子节点字段名 */ childrenKey?: string; /** 缩进大小 */ indent?: number; /** 默认展开层级 */ defaultExpandLevel?: number; /** 默认展开所有 */ expandAll?: boolean; /** 展开触发区域 */ trigger?: TreeExpandTrigger; /** 懒加载 */ lazy?: boolean; /** 懒加载方法 */ loadMethod?: (row: Record) => Promise[]>; /** 手风琴模式 */ accordion?: boolean; /** 展开图标 */ expandIcon?: Component | string; /** 折叠图标 */ collapseIcon?: Component | string; /** 叶子节点图标 */ leafIcon?: Component | string; /** 是否显示连接线 */ showLine?: boolean; /** 连接线样式 */ lineStyle?: 'solid' | 'dashed' | 'dotted'; } export interface TableVirtualConfig { /** 是否启用虚拟滚动 */ enabled?: boolean; /** 行高 */ rowHeight?: number | ((row: Record, rowIndex: number) => number); /** 缓冲区大小 */ buffer?: number; /** 预渲染行数 */ overscan?: number; /** 列虚拟化 */ columnVirtual?: boolean; /** 列缓冲区 */ columnBuffer?: number; } export interface TableDragConfig { /** 是否可拖拽行 */ row?: boolean; /** 是否可拖拽列 */ column?: boolean; /** 拖拽手柄 */ handle?: string; /** 动画时长 */ animation?: number; /** 拖拽开始回调 */ onDragStart?: (params: { type: 'row' | 'column'; data: unknown; index: number; }) => void; /** 拖拽结束回调 */ onDragEnd?: (params: { type: 'row' | 'column'; oldIndex: number; newIndex: number; data: unknown[]; }) => void; /** 是否跨表格拖拽 */ crossTable?: boolean; /** 拖拽时的样式类 */ dragClass?: string; /** 幽灵元素样式类 */ ghostClass?: string; } export interface TableSummaryConfig { /** 汇总行位置 */ position?: 'top' | 'bottom'; /** 汇总方法 */ method?: (params: { columns: TableColumn[]; data: Record[]; }) => Array; /** 固定汇总行 */ fixed?: boolean; /** 自定义汇总文本 */ text?: string; /** 汇总行类名 */ className?: string; } export interface TableToolbarConfig { /** 是否显示 */ visible?: boolean; /** 刷新按钮 */ refresh?: boolean; /** 列设置 */ columnSetting?: boolean; /** 密度设置 */ density?: boolean; /** 全屏按钮 */ fullscreen?: boolean; /** 导出按钮 */ export?: boolean | TableExportConfig; /** 打印按钮 */ print?: boolean; /** 自定义按钮 */ custom?: Array<{ icon?: string | Component; text?: string; onClick?: () => void; disabled?: boolean; }>; /** 搜索框 */ search?: boolean | { placeholder?: string; width?: number | string; }; } export interface TableExportConfig { /** 导出类型 */ type?: 'csv' | 'xlsx' | 'pdf' | 'html'; /** 文件名 */ filename?: string; /** 是否包含表头 */ includeHeader?: boolean; /** 是否只导出可见列 */ visibleOnly?: boolean; /** 自定义导出数据 */ customData?: (data: Record[]) => Record[]; /** 导出前回调 */ beforeExport?: () => boolean | Promise; /** 导出后回调 */ afterExport?: () => void; } export interface TableEmptyConfig { /** 空状态图片 */ image?: string; /** 空状态描述 */ description?: string; /** 自定义渲染 */ render?: () => VNode; } export interface TableLoadingConfig { /** 是否加载中 */ visible?: boolean; /** 加载文本 */ text?: string; /** 加载图标 */ icon?: Component | string; /** 加载背景 */ background?: string; /** 自定义渲染 */ render?: () => VNode; } export interface TableRowConfig> { /** 行高 */ height?: number | string; /** 行类名 */ className?: string | ((params: { row: T; rowIndex: number; }) => string); /** 行样式 */ style?: CSSProperties | ((params: { row: T; rowIndex: number; }) => CSSProperties); /** 是否高亮当前行 */ highlightCurrent?: boolean; /** 斑马纹 */ stripe?: boolean; /** 悬浮高亮 */ hover?: boolean; } export interface TableHeaderConfig { /** 表头高度 */ height?: number | string; /** 表头类名 */ className?: string; /** 表头样式 */ style?: CSSProperties; /** 是否显示表头 */ visible?: boolean; /** 表头背景 */ background?: string; } export interface TableContextMenuConfig> { /** 是否启用 */ enabled?: boolean; /** 菜单项 */ items?: Array<{ key: string; label: string; icon?: string | Component; disabled?: boolean | ((row: T, column: TableColumn) => boolean); onClick?: (params: { row: T; column: TableColumn; rowIndex: number; }) => void; divider?: boolean; children?: TableContextMenuConfig['items']; }>; /** 自定义渲染 */ render?: (params: { row: T; column: TableColumn; rowIndex: number; }) => VNode; } export declare const tableProps: { /** 数据源 */ readonly data: { readonly type: PropType[]>; readonly default: () => never[]; }; /** 列配置 */ readonly columns: { readonly type: PropType; readonly default: () => never[]; }; /** 行唯一标识 */ readonly rowKey: { readonly type: PropType; readonly default: "id"; }; /** 表格尺寸 */ readonly size: { readonly type: PropType; readonly default: "default"; }; /** 表格高度 */ readonly height: { readonly type: PropType; }; /** 表格最大高度 */ readonly maxHeight: { readonly type: PropType; }; /** 表格宽度 */ readonly width: { readonly type: PropType; }; /** 是否显示边框 */ readonly border: { readonly type: PropType; readonly default: false; }; /** 是否显示斑马纹 */ readonly stripe: { readonly type: BooleanConstructor; readonly default: false; }; /** 是否高亮当前行 */ readonly highlightCurrentRow: { readonly type: BooleanConstructor; readonly default: false; }; /** 当前选中行 */ readonly currentRowKey: { readonly type: PropType; }; /** 是否显示表头 */ readonly showHeader: { readonly type: BooleanConstructor; readonly default: true; }; /** 空数据显示文本 */ readonly emptyText: { readonly type: StringConstructor; readonly default: ""; }; /** 是否自适应父容器 */ readonly fit: { readonly type: BooleanConstructor; readonly default: true; }; /** 排序配置 */ readonly sortConfig: { readonly type: PropType; }; /** 筛选配置 */ readonly filterConfig: { readonly type: PropType; }; /** 分页配置 */ readonly pagination: { readonly type: PropType; readonly default: false; }; /** 选择配置 */ readonly selectionConfig: { readonly type: PropType; }; /** 展开配置 */ readonly expandConfig: { readonly type: PropType; }; /** 树形配置 */ readonly treeConfig: { readonly type: PropType; }; /** 虚拟滚动配置 */ readonly virtualConfig: { readonly type: PropType; }; /** 拖拽配置 */ readonly dragConfig: { readonly type: PropType; }; /** 汇总配置 */ readonly summaryConfig: { readonly type: PropType; }; /** 工具栏配置 */ readonly toolbarConfig: { readonly type: PropType; }; /** 空状态配置 */ readonly emptyConfig: { readonly type: PropType; }; /** 加载配置 */ readonly loading: { readonly type: PropType; readonly default: false; }; /** 行配置 */ readonly rowConfig: { readonly type: PropType; }; /** 表头配置 */ readonly headerConfig: { readonly type: PropType; }; /** 右键菜单配置 */ readonly contextMenuConfig: { readonly type: PropType; }; /** 表格布局 */ readonly tableLayout: { readonly type: PropType<"auto" | "fixed">; readonly default: "fixed"; }; /** 溢出提示效果 */ readonly tooltipEffect: { readonly type: PropType<"dark" | "light">; readonly default: "dark"; }; /** 合并单元格方法 */ readonly spanMethod: { readonly type: PropType<(params: { row: Record; column: TableColumn; rowIndex: number; columnIndex: number; }) => { rowspan: number; colspan: number; } | [number, number] | void>; }; /** 行类名 */ readonly rowClassName: { readonly type: PropType; rowIndex: number; }) => string)>; }; /** 行样式 */ readonly rowStyle: { readonly type: PropType; rowIndex: number; }) => CSSProperties)>; }; /** 单元格类名 */ readonly cellClassName: { readonly type: PropType; column: TableColumn; rowIndex: number; columnIndex: number; }) => string)>; }; /** 单元格样式 */ readonly cellStyle: { readonly type: PropType; column: TableColumn; rowIndex: number; columnIndex: number; }) => CSSProperties)>; }; /** 表头行类名 */ readonly headerRowClassName: { readonly type: PropType string)>; }; /** 表头行样式 */ readonly headerRowStyle: { readonly type: PropType CSSProperties)>; }; /** 表头单元格类名 */ readonly headerCellClassName: { readonly type: PropType string)>; }; /** 表头单元格样式 */ readonly headerCellStyle: { readonly type: PropType CSSProperties)>; }; /** 是否懒加载 */ readonly lazy: { readonly type: BooleanConstructor; readonly default: false; }; /** 懒加载方法 */ readonly loadMethod: { readonly type: PropType<(row: Record) => Promise[]>>; }; /** 是否可调整列宽 */ readonly resizable: { readonly type: BooleanConstructor; readonly default: false; }; /** 是否显示序号 */ readonly showIndex: { readonly type: BooleanConstructor; readonly default: false; }; /** 序号列配置 */ readonly indexConfig: { readonly type: PropType<{ label?: string; width?: number | string; fixed?: FixedPosition; method?: (rowIndex: number) => number | string; }>; }; /** 自适应内容高度 */ readonly autoHeight: { readonly type: BooleanConstructor; readonly default: false; }; /** 保持滚动位置 */ readonly keepScroll: { readonly type: BooleanConstructor; readonly default: false; }; /** 同步滚动 */ readonly syncScroll: { readonly type: BooleanConstructor; readonly default: true; }; /** 滚动优化 */ readonly scrollOptimize: { readonly type: BooleanConstructor; readonly default: true; }; /** 主题覆盖变量 */ readonly themeOverrides: { readonly type: PropType; readonly default: undefined; }; }; export type TableProps = ExtractPropTypes; export declare const tableEmits: { /** 排序变化 */ readonly 'sort-change': (_params: { column: TableColumn; prop: string; order: SortOrder; }) => boolean; /** 筛选变化 */ readonly 'filter-change': (_filters: Record) => boolean; /** 分页变化 */ readonly 'page-change': (_params: { currentPage: number; pageSize: number; }) => boolean; /** 选择变化 */ readonly 'selection-change': (_selectedRows: Record[], _selectedRowKeys: Array) => boolean; /** 当前行变化 */ readonly 'current-change': (_currentRow: Record | null, _oldRow: Record | null) => boolean; /** 展开变化 */ readonly 'expand-change': (_row: Record, _expandedRows: Record[]) => boolean; /** 行点击 */ readonly 'row-click': (_row: Record, _column: TableColumn, _event: MouseEvent) => boolean; /** 行双击 */ readonly 'row-dblclick': (_row: Record, _column: TableColumn, _event: MouseEvent) => boolean; /** 行右键 */ readonly 'row-contextmenu': (_row: Record, _column: TableColumn, _event: MouseEvent) => boolean; /** 单元格点击 */ readonly 'cell-click': (_row: Record, _column: TableColumn, _cell: HTMLElement, _event: MouseEvent) => boolean; /** 单元格双击 */ readonly 'cell-dblclick': (_row: Record, _column: TableColumn, _cell: HTMLElement, _event: MouseEvent) => boolean; /** 表头点击 */ readonly 'header-click': (_column: TableColumn, _event: MouseEvent) => boolean; /** 表头右键 */ readonly 'header-contextmenu': (_column: TableColumn, _event: MouseEvent) => boolean; /** 全选 */ readonly 'select-all': (_selection: Record[]) => boolean; /** 选择行 */ readonly select: (_selection: Record[], _row: Record) => boolean; /** 滚动事件 */ readonly scroll: (_params: { scrollTop: number; scrollLeft: number; isEnd: boolean; }) => boolean; /** 拖拽结束 */ readonly 'drag-end': (_params: { type: "row" | "column"; oldIndex: number; newIndex: number; data: unknown[]; }) => boolean; /** 列宽变化 */ readonly 'column-resize': (_column: TableColumn, _width: number) => boolean; /** 列可见性变化 */ readonly 'column-visible-change': (_columns: TableColumn[]) => boolean; /** 数据更新 */ readonly 'update:data': (_data: Record[]) => boolean; /** 当前行 key 更新 */ readonly 'update:currentRowKey': (_key: string | number | undefined) => boolean; }; export type TableEmits = typeof tableEmits; export interface TableContext { props: TableProps; slots: Record; registerColumn: (column: TableColumn) => void; unregisterColumn: (column: TableColumn) => void; } export declare const tableContextKey: InjectionKey; export interface TableExpose { /** 获取选中行 */ getSelectionRows: () => Record[]; /** 获取选中行 key */ getSelectionRowKeys: () => Array; /** 切换行选中状态 */ toggleRowSelection: (row: Record, selected?: boolean) => void; /** 切换全选 */ toggleAllSelection: () => void; /** 清空选择 */ clearSelection: () => void; /** 设置当前行 */ setCurrentRow: (row: Record | null) => void; /** 切换行展开 */ toggleRowExpansion: (row: Record, expanded?: boolean) => void; /** 设置展开行 */ setExpandedRowKeys: (keys: Array) => void; /** 获取展开行 keys */ getExpandedRowKeys: () => Array; /** 排序 */ sort: (prop: string, order: SortOrder) => void; /** 清空排序 */ clearSort: () => void; /** 筛选 */ filter: (prop: string, values: unknown[]) => void; /** 清空筛选 */ clearFilter: (props?: string | string[]) => void; /** 刷新布局 */ doLayout: () => void; /** 刷新数据 */ refresh: () => void; /** 滚动到指定位置 */ scrollTo: (options: { left?: number; top?: number; row?: Record; rowIndex?: number; column?: TableColumn; columnIndex?: number; }) => void; /** 获取表格数据 */ getTableData: () => { fullData: Record[]; tableData: Record[]; }; /** 导出数据(支持 csv / json / txt / xml / html) */ exportData: (config?: Record) => Promise; /** 打印(支持自定义标题、列、页眉页脚、分页等) */ print: (config?: Record) => Promise; /** 打开文件选择器导入 */ openImport: (config?: Record) => Promise[]>; /** 从 File 对象导入 */ importFile: (file: File, config?: Record) => Promise[]>; /** 从文本/数组导入 */ importData: (content: string | Record[], config?: Record) => Promise[]>; /** 打印多张表格 */ printMultiple: (tables: Array<{ title?: string; data: Record[]; columns?: TableColumn[]; config?: Record; }>, config?: Record) => Promise; /** 打印自定义模板 */ printTemplate: (templateHtml: string, config?: Record) => Promise; /** 全屏切换 */ toggleFullscreen: () => void; /** 获取列信息 */ getColumns: () => TableColumn[]; /** 设置列可见性 */ setColumnVisible: (prop: string, visible: boolean) => void; /** 重置列 */ resetColumns: () => void; /** 插入行 */ insertRow: (row: Record, index?: number) => void; /** 删除行 */ removeRow: (row: Record | Record[]) => void; /** 更新行 */ updateRow: (row: Record, newRow: Record) => void; }