import { Component, ExtractPropTypes, PropType, Ref, VNode } from 'vue'; import { TableRowT } from '../table'; export declare const DataTableSizes: readonly ["medium", "small"]; export type DataTableSizeT = (typeof DataTableSizes)[number]; export declare const DataTableHeaderStyles: readonly ["fill", "split-line"]; export type DataTableHeaderStyleT = (typeof DataTableHeaderStyles)[number]; export declare const DataTableFixedTypes: readonly [true, "left", "right"]; export type DataTableFixedT = (typeof DataTableFixedTypes)[number]; /** * 被选项通用类型 * @template TLabel - label字段的类型,默认any * @template TValue - value字段的类型,默认any */ export interface DataTableColumnFilterOption { /** * 标签文本,用于渲染 */ label: TLabel; /** * 选项值 */ value: TValue; [key: string]: any; } /** 筛选条件为“空”时的值 */ export declare const TABLE_EMPTY_OPTION_VALUE: "__null__"; /** 筛选条件为单选时,筛选条件为“全选”时的值 */ export declare const TABLE_ALL_OPTION_VALUE: "__all__"; /** * 获取筛选项数组的方法,支持异步返回 * @param {EffectiveDataTableColumnT} option.column 当前列的配置 * @param {DataTableColumnFilterOption} option.emptyOption 空值选项,根据需求采用 */ export type DataTableColumnFilterOptionsFn = (option: { column: EffectiveDataTableColumnT; emptyOption: { label: string; value: typeof TABLE_EMPTY_OPTION_VALUE; }; }) => DataTableColumnFilterOption[] | Promise[]>; /** * 单元格渲染方法入参 */ export interface DataTableColumnFormatterOptions { /** * 当前行的数据 */ row: any; /** * 当前列的配置 */ column: EffectiveDataTableColumnT; /** * 单元格默认的渲染值 */ cellValue: string | number | unknown; /** * 当前行的索引 */ rowIndex: number; /** * 当前列的索引 */ colIndex: number; } /** * 单元格的渲染方法 * @returns 可返回 string(纯文本)、VNode(h 函数创建)、Component(defineComponent 创建)、 * 或函数式组件 `() => VNode`(推荐用于 JSX/TSX 场景) */ export type DataTableColumnFormatter = (options: DataTableColumnFormatterOptions) => Component | VNode | string; /** * 合并单元格的计算方法 */ export type DataTableSpanMethod = (options: DataTableColumnFormatterOptions) => { colSpan?: number; rowSpan?: number; } | void; /** * 行展开的计算方法,返回 false 则不可被展开 * @returns 可返回 Component、VNode、string、或函数式组件 `() => VNode`(推荐 JSX/TSX 场景); * 返回 false 表示该行不可展开 */ export type DataTableExpandMethod = (row: any, rowIndex: number) => Component | VNode | string | false; export type DataTableColumnFilterT = { /** * 获取筛选可选项的方法,支持异步返回 * @param option.column 当前列的配置 * @param option.emptyOption 内置的"空值"选项,可直接放入返回数组以支持筛选空值数据 */ optionsFn: DataTableColumnFilterOptionsFn; /** * 移动端弹窗的title */ optionTitle?: string; /** * 是否支持多选 * @default true */ multiple?: boolean; /** * 是否显示选项筛选输入框 * @default (optionsCount) => optionsCount > 8 */ showInput?: boolean | ((optionsCount: number) => boolean); }; /** * 列的配置 */ export interface DataTableColumnT { /** * 列的数据字段名,对应行数据对象的 key */ key: string; /** * 列表头文本,可传入字符串、VNode 或 Component 来自定义表头渲染 */ label?: string | Component | VNode; /** * 列表头的描述文案,会以气泡的形式展示在表头旁 */ description?: string | Component | VNode; /** * 单元格渲染方法,可返回 string、VNode、Component 或函数式组件 `() => VNode` */ formatter?: DataTableColumnFormatter; /** * 列固定方向,true 等同 'left' * @important IOS 端不支持多列固定 */ fixed?: DataTableFixedT; /** * 是否是作为竖向表头列 * @default false */ asHeader?: boolean; /** 列的宽度 */ width?: number | string; /** 列的最小宽度 */ minWidth?: number | string; /** 列的最大宽度 */ maxWidth?: number | string; /** * 表头是否显示溢出隐藏气泡,传入数字以设置最大行数 * @default 1 */ showHeaderOverflowToolTip?: boolean | number; /** * 表体是否显示溢出隐藏气泡,传入数字以设置最大行数 * @default false */ showOverflowToolTip?: boolean | number; /** * 排序方式绑定的条件对象的key * @important 只能进行单一列的排序,当前列排序修改后会清空其他列的排序 */ sortKey?: string; /** * 列表头筛选配置 */ filter?: DataTableColumnFilterT; /** * 表头单元格的自定义colspan * @important 仅支持同层级兄弟单元格之间的合并 */ customColSpan?: number; /** * 嵌套表头配置 */ children?: DataTableColumnT[]; } export type EffectiveDataTableColumnCommonT = { formatter: DataTableColumnFormatter; colSpan?: number; rowSpan?: number; /** 列宽调整后的宽度,用于计算固定列的定位值 */ resizeWidth?: number; /** 列的最小宽度 - 通过容器宽度计算后 */ _minWidth?: number; /** 列的最大宽度 - 通过容器宽度计算后 */ _maxWidth?: number; fixed?: 'left' | 'right'; /** fix为undefined或left时当前列的left值 */ left?: number; /** fix为right时当前列的right值 */ right?: number; /** 是否是最后一个左固定列,用于控制表头样式 */ isLastLeftFixedCol?: boolean; /** 是否是第一个右固定列,用于控制表头样式 */ isFirstRightFixedCol?: boolean; /** 是否是最左边的列 */ isFirstCol?: boolean; /** 是否是最右边的列 */ isLastCol?: boolean; /** 表头是否由于自定义表头单元格合并而被合并后,不渲染 */ headerHidden?: boolean; colRef?: HTMLTableColElement; thRef?: HTMLTableCellElement; /** * 嵌套表头配置 */ children?: EffectiveDataTableColumnT[]; parent?: EffectiveDataTableColumnT; }; export type EffectiveDataTableColumnT = DataTableColumnT & EffectiveDataTableColumnCommonT; export declare const dataTableProps: { /** * @zh-CN 表格数据 * @en-US Table data */ readonly data: { readonly type: PropType; readonly required: true; }; /** * @zh-CN 列配置, IOS端不支持多列固定 * @en-US Table column schema, not support multi-column fixed in IOS */ readonly columns: { readonly type: PropType; readonly required: true; }; /** * @zh-CN 表格尺寸 * @en-US table size */ readonly size: { readonly type: PropType; readonly default: "medium"; }; /** * @zh-CN 表格高度,超出时固定表头滚动 * @en-US Table Height: Fixed Header with Scrollable Body When Exceeding Height */ readonly height: { readonly type: PropType; }; /** * @zh-CN 表格最大高度,超出时固定表头滚动 * @en-US Table Max Height: Fixed Header with Scrollable Body When Exceeding Height */ readonly maxHeight: { readonly type: PropType; readonly default: "fit-content"; }; /** * @zh-CN 内部table元素最小宽度,超出时出现横向滚动条 * @en-US min-width of the inner table element; a horizontal scrollbar will appear when it exceeds the available width. */ readonly minTableWidth: { readonly type: PropType; }; /** * @zh-CN 表格数据行唯一标识字段名 * @en-US Unique Identifier Field Name for Table Data Rows */ readonly rowKey: { readonly type: PropType string)>; readonly default: "id"; }; /** * @zh-CN 合并单元格的计算方法,已被合并的单元格不会再次被合并 * @en-US Calculation Methods for Merged Cells. Cells that have already been merged cannot be merged again */ readonly spanMethod: { readonly type: PropType; readonly default: () => () => undefined; }; /** * @zh-CN 是否展示header * @en-US Whether to show the header. */ readonly showHeader: { readonly type: BooleanConstructor; readonly default: true; }; /** * @zh-CN 表头风格 * @en-US table header style */ readonly headerStyle: { readonly type: PropType; readonly default: "fill"; }; /** * @zh-CN 行展开的计算方法,返回 `false` 则不可被展开 * @en-US Calculation Methods for Row expansion. Returns `false` if the row cannot be expanded. */ readonly expandMethod: { readonly type: PropType; }; /** * @zh-CN 表格是否可以调整列宽 * @en-US Resize column width */ readonly columnResizable: { readonly type: BooleanConstructor; readonly default: false; }; /** * @zh-CN 表格是否可以行选择 * @en-US Whether row selection is available for the table. */ readonly selection: { readonly type: BooleanConstructor; readonly default: false; }; /** * @zh-CN 选择时指示行是否可被选择的键名 * @en-US Key name for indicating row selectability during selection */ readonly disabledProp: { readonly type: StringConstructor; readonly default: "disabled"; }; /** * @zh-CN 树形表格选择时是否遵循父子不关联 * @en-US Whether to disable parent-child association in tree table selection */ readonly checkStrictly: { readonly type: BooleanConstructor; readonly default: true; }; readonly stripe: { readonly type: BooleanConstructor; readonly default: false; }; readonly border: { readonly type: PropType; readonly default: "row"; }; /** * @zh-CN 单元格为空时的展示文案,默认为 '--' * @en-US Render text when cell value is empty */ readonly defaultEmptyCellText: { readonly type: StringConstructor; readonly default: "--"; }; readonly emptyLabel: { readonly type: StringConstructor; }; readonly loading: { readonly type: BooleanConstructor; }; readonly loadingLabel: { readonly type: StringConstructor; }; readonly highlightCurrentRow: { readonly type: BooleanConstructor; readonly default: false; }; }; export type DataTablePropsT = ExtractPropTypes; /** rowKey对应的值的可能类型 */ export type DataTableRowKeyValue = string | number; export type DataTableConditionValue = string | number | boolean; export type DataTableConditionUpdatePayload = { /** 对应column的key */ key: string; /** 选中的值,由于是多选,所以是数组类型 */ newVal: T[]; }; /** * 排序方式常量 * - ASC (1): 升序排序 * - DESC (-1): 降序排序 * - NA (undefined): 不排序,用于初始化 conditions 中的排序字段 */ export declare const DataTableSortMethod: { /** 升序排序 */ readonly ASC: 1; /** 降序排序 */ readonly DESC: -1; /** 不排序 */ readonly NA: undefined; }; export type DataTableSortMethodT = (typeof DataTableSortMethod)[keyof typeof DataTableSortMethod]; export type DataTableSortUpdatePayload = { /** 对应column的key */ key: string; newVal?: DataTableSortMethodT; }; /** 单行数据选中、取消事件传参 */ export type DataTableSelectionPayload = { /** 对应行数据的rowKey对应的值 */ key: DataTableRowKeyValue; /** 是否被选中 */ selected: boolean; }; export type DataTableSelectionChangePayload = { /** 改变前对应行数据的rowKey对应的值 */ prev: DataTableRowKeyValue[]; /** 改变后对应行数据的rowKey对应的值 */ cur: DataTableRowKeyValue[]; }; export type DataTableExposed = { /** 计算当前行的rowKey的方法 */ getRowKey: (row: TableRowT, rowIndex: number) => DataTableRowKeyValue; /** 所有列配置的基于key的map */ dataColumnMap: Map; /** 所有的列的扁平数组 */ dataColumns: Ref; /** 列根据层级关系构造的二维数组 */ groupColumns: Ref; /** 全选 */ selectAll: () => void; /** 清空全选 */ clearAll: () => void; /** 展开全部 */ expandAll: () => void; /** 收起全部 */ foldAll: () => void; };