import { ComponentSize } from 'element-plus/es/constants'; import { PlusPaginationProps } from 'yc-pro-components/es/components/pagination'; import { ActionBarProps, ButtonsCallBackParams } from 'yc-pro-components/es/components/table'; import { RecordType, PageInfo, PlusColumn } from 'yc-pro-components/es/types'; import { TableV2FixedDir, CheckboxValueType } from 'element-plus'; import { CSSProperties, VNode } from 'vue'; /** * el-table-v2 单元格渲染器参数 * @see https://element-plus.org/en-US/component/table-v2#column-attribute */ export interface VirtualCellRendererParams { /** 当前单元格数据(row[dataKey] 的值) */ cellData: unknown; /** 当前列配置 */ column: VirtualTableColumn; /** 列索引 */ columnIndex: number; /** 所有列配置 */ columns: VirtualTableColumn[]; /** 当前行数据 */ rowData: RecordType; /** 行索引 */ rowIndex: number; } /** * el-table-v2 表头渲染器参数 */ export interface VirtualHeaderRendererParams { /** 当前列配置 */ column: VirtualTableColumn; /** 列索引 */ columnIndex: number; /** 所有列配置 */ columns: VirtualTableColumn[]; /** 表头索引(多级表头时有用) */ headerIndex: number; } /** * el-table-v2 的列配置类型 * 这是 el-table-v2 原生要求的列格式 */ export interface VirtualTableColumn { /** 列唯一标识(必填) */ key: string; /** 数据字段名(对应 row[dataKey]) */ dataKey: string; /** 表头标题 */ title: string; /** 列宽度(必填,el-table-v2 要求所有列必须指定宽度) */ width: number; /** * 列固定方向 * - true / TableV2FixedDir.LEFT: 固定在左侧 * - TableV2FixedDir.RIGHT: 固定在右侧 */ fixed?: true | TableV2FixedDir; /** 内容对齐方式 */ align?: 'left' | 'center' | 'right'; /** 自定义单元格渲染器 */ cellRenderer?: (params: VirtualCellRendererParams) => VNode | string | number; /** 自定义表头渲染器 */ headerCellRenderer?: (params: VirtualHeaderRendererParams) => VNode | string; /** 是否可排序 */ sortable?: boolean; /** * 内部引用:关联的 PlusColumn 原始配置 * 用于在渲染器中访问 PlusColumn 的完整配置(如 options、emptyText 等) */ _plusColumn?: PlusColumn; /** CSS 类名 */ class?: string; /** 最大宽度 */ maxWidth?: number; /** 最小宽度 */ minWidth?: number; } /** * 行选择变化事件参数 */ export interface SelectionChangeParams { /** 当前选中的所有行数据 */ selectedRows: RecordType[]; /** 当前选中的所有行 Key */ selectedKeys: Set; } /** * 单行选择事件参数 */ export interface SelectParams { /** 变化后的选中行列表 */ selection: RecordType[]; /** 触发变化的行数据 */ row: RecordType; } /** * 全选事件参数 */ export interface SelectAllParams { /** 变化后的选中行列表 */ selection: RecordType[]; } /** * useVirtualSelection composable 的配置 */ export interface UseVirtualSelectionConfig { /** 行数据的唯一标识字段名 */ rowKey: string; /** 全部表格数据 */ data: RecordType[]; } /** * useVirtualSelection composable 的返回值 */ export interface UseVirtualSelectionReturn { /** 当前选中的行 Key 集合 */ selectedKeys: Set; /** 是否全选 */ isAllSelected: boolean; /** 是否半选(部分选中) */ isIndeterminate: boolean; /** 切换单行选择 */ toggleRowSelection: (row: RecordType, selected?: boolean) => void; /** 切换全选 */ toggleAllSelection: (selected?: boolean) => void; /** 获取选中的行数据 */ getSelectionRows: () => RecordType[]; /** 清空选择 */ clearSelection: () => void; /** 处理 checkbox 变化(单行) */ handleCheckboxChange: (row: RecordType, value: CheckboxValueType) => void; /** 处理全选 checkbox 变化 */ handleAllCheckboxChange: (value: CheckboxValueType) => void; } /** * 列适配器配置 */ export interface ColumnAdapterConfig { /** 原始 PlusColumn 配置 */ columns: PlusColumn[]; /** 是否显示选择列 */ isSelection?: boolean; /** 是否显示序号列 */ hasIndexColumn?: boolean; /** 操作栏配置 */ actionBar?: false | Partial; /** 行唯一标识字段 */ rowKey?: string; /** 默认列宽度(当 PlusColumn 未指定 width 时使用) */ defaultColumnWidth?: number; /** 全局空值文本 */ columnsEmptyText?: string; /** 分页信息(用于计算序号) */ pageInfo?: PageInfo; } /** * PlusVirtualTable 组件属性 * * 设计目标:与 PlusTable 的 Props 尽可能对齐, * 让上层组件(PlusPage / YcPlusPage)可以透明切换。 * * 不支持的 PlusTable 特性(虚拟模式下不可用): * - editable(可编辑单元格) * - dragSortable(拖拽排序行) * - hasExpand(展开行) * - titleBar 中的 columnSetting(列设置) * - isRadio(单选模式) */ export interface PlusVirtualTableProps { /** 表格列配置(PlusColumn 格式,内部自动适配为 el-table-v2 格式) */ columns?: PlusColumn[]; /** * 表格数据(同 data) * @deprecated 建议使用 data */ tableData?: RecordType[]; /** 表格数据 */ data?: RecordType[]; /** 分页参数 */ pagination?: false | Partial; /** 操作栏参数 */ actionBar?: false | Partial; /** 是否显示序号列 */ hasIndexColumn?: boolean; /** 是否显示多选列 */ isSelection?: boolean; /** 加载状态 */ loadingStatus?: boolean; /** * 表格高度 * 虚拟表格必须指定高度,如不指定则使用 AutoResizer 自动填充父容器 */ height?: number | string; /** * 表格宽度 * 如不指定则使用 AutoResizer 自动填充父容器 */ width?: number | string; /** 表头样式 */ headerCellStyle?: CSSProperties; /** 行唯一标识字段名,默认 'id' */ rowKey?: string; /** 默认密度 */ defaultSize?: ComponentSize; /** 行高度,默认 50 */ rowHeight?: number; /** 表头高度,默认 50 */ headerHeight?: number; /** 是否启用固定列模式 */ fixed?: boolean; /** 默认列宽度(PlusColumn 未指定时的回退值),默认 150 */ defaultColumnWidth?: number; /** * 空值默认文本(全局) * 当字段值为 null、undefined 或空字符串时显示此文本 */ columnsEmptyText?: string; /** * 表格行的 CSS 类名 * 支持函数方式根据行数据动态设定 */ rowClass?: string | ((params: { rowData: RecordType; rowIndex: number; }) => string); /** * 表格行样式 * 支持函数方式根据行数据动态设定 */ rowStyle?: CSSProperties | ((params: { rowData: RecordType; rowIndex: number; }) => CSSProperties); /** 滚动条是否常显,默认 true */ scrollbarAlwaysOn?: boolean; /** * 是否显示标题栏(仅支持刷新按钮) * 虚拟表格的标题栏为简化版,不支持列设置和密度切换 */ titleBar?: boolean | { title?: string; refresh?: boolean; }; /** 选择列的宽度 */ selectionColumnWidth?: number; /** 序号列的宽度 */ indexColumnWidth?: number; /** 是否显示斑马纹(奇偶行交替背景色),默认 false */ stripe?: boolean; /** 是否显示纵向边框,默认 false */ border?: boolean; } /** * PlusVirtualTable 组件事件 */ export interface PlusVirtualTableEmits { /** 分页变化 */ (e: 'paginationChange', pageInfo: PageInfo): void; /** 操作栏按钮点击 */ (e: 'clickAction', data: ButtonsCallBackParams): void; /** 选择变化 */ (e: 'selection-change', selection: RecordType[]): void; /** 单行选择 */ (e: 'select', selection: RecordType[], row: RecordType): void; /** 全选 */ (e: 'select-all', selection: RecordType[]): void; /** 刷新 */ (e: 'refresh'): void; /** 行点击 */ (e: 'row-click', rowData: RecordType, rowIndex: number): void; /** 排序变化 */ (e: 'sort-change', data: { column: VirtualTableColumn; prop: string; order: string | null; }): void; } /** * PlusVirtualTable 暴露的方法和属性 * 与 PlusTable 的 expose 对齐,保证上层组件可以无缝调用 */ export interface PlusVirtualTableExpose { /** 获取选中行 */ getSelectionRows: () => RecordType[]; /** 清空选择 */ clearSelection: () => void; /** 切换行选择 */ toggleRowSelection: (row: RecordType, selected?: boolean) => void; /** 切换全选 */ toggleAllSelection: (selected?: boolean) => void; /** 滚动到指定行 */ scrollToRow: (rowIndex: number) => void; /** 表格数据(只读) */ data: RecordType[]; }