diff --git a/packages/components/table/base-table-props.ts b/packages/components/table/base-table-props.ts index 48510a01d1..ef72d66b76 100644 --- a/packages/components/table/base-table-props.ts +++ b/packages/components/table/base-table-props.ts @@ -64,6 +64,8 @@ export default { type: [String, Function] as PropType, default: '' as TdBaseTableProps['empty'], }, + /** 切换分页时是否锁定滚动条。开启后,切换分页时不会重置滚动条位置。 */ + enableLockScrollbar: Boolean, /** 首行内容,横跨所有列 */ firstFullRow: { type: [String, Function] as PropType, diff --git a/packages/components/table/hooks/usePagination.tsx b/packages/components/table/hooks/usePagination.tsx index c0e51d4218..e053cf9da1 100644 --- a/packages/components/table/hooks/usePagination.tsx +++ b/packages/components/table/hooks/usePagination.tsx @@ -74,14 +74,17 @@ export default function usePagination( updateDataSourceAndPaginate(pageInfo.current, pageInfo.pageSize); props.onPageChange?.(pageInfo, dataSource.value); - // 当切换分页时,内容区域滚动到顶部 - const ref = tableContentRef.value; - if (ref.scrollTo) { - ref.scrollTo({ top: 0, left: 0 }); - } else { - // 兼容测试环境或旧浏览器 - ref.scrollTop = 0; - ref.scrollLeft = 0; + // 当切换分页时,默认将内容区域滚动到顶部。 + // 若开启 enableLockScrollbar,则跳过重置,由 BaseTable 在数据渲染完成后恢复滚动位置。 + if (!props.enableLockScrollbar && tableContentRef.value) { + const ref = tableContentRef.value; + if (ref.scrollTo) { + ref.scrollTo({ top: 0, left: 0 }); + } else { + // 兼容测试环境或旧浏览器 + ref.scrollTop = 0; + ref.scrollLeft = 0; + } } }} v-slots={{ totalContent: context.slots.totalContent }} diff --git a/packages/components/table/primary-table-props.ts b/packages/components/table/primary-table-props.ts index 9652823539..3355e06190 100644 --- a/packages/components/table/primary-table-props.ts +++ b/packages/components/table/primary-table-props.ts @@ -106,7 +106,7 @@ export default { }, /** 是否支持多列排序 */ multipleSort: Boolean, - /** 行选中功能,是否在分页时保留上一页选中结果不清空,本地数据分页场景下,会全选所有页数据。值为 `false` 则表示全部选中操作停留在当前页,不跨分页;本地数据分页场景下,全选仅选中当前页 */ + /** 行选中功能,是否在分页时保留上一页选中结果不清空。分页场景下,会全选所有页数据,保留跨分页数据。值为 `false` 则表示全部选中操作停留在当前页,不跨分页。 */ reserveSelectedRowOnPaginate: { type: Boolean, default: true, diff --git a/packages/components/table/table.en-US.md b/packages/components/table/table.en-US.md index 92f3850419..2d2cb61960 100644 --- a/packages/components/table/table.en-US.md +++ b/packages/components/table/table.en-US.md @@ -19,6 +19,7 @@ data | Array | [] | table data。Typescript: `Array` | N disableDataPage | Boolean | false | \- | N disableSpaceInactiveRow | Boolean | undefined | can not set row to be inactive with Space keydown | N empty | String / Slot / Function | '' | empty text or empty element。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +enableLockScrollbar | Boolean | false | \- | N firstFullRow | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N fixedRows | Array | - | Typescript: `Array` | N footData | Array | [] | table foot data。Typescript: `Array` | N @@ -43,7 +44,7 @@ resizable | Boolean | false | allow to resize column width, set `tableLayout=fix rowAttributes | Object / Array / Function | - | `tr` attributes。Typescript: `TableRowAttributes` `type TableRowAttributes = HTMLElementAttributes \| ((params: { row: T; rowIndex: number; type: 'body' \| 'foot' }) => HTMLElementAttributes) \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N rowClassName | String / Object / Array / Function | - | table `th` classname。Typescript: `ClassName \| ((params: RowClassNameParams) => ClassName)` `interface RowClassNameParams { row: T; rowIndex: number; rowKey?: string; type?: 'body' \| 'foot' }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N rowKey | String | 'id' | required。unique key for each row data | Y -rowspanAndColspan | Function | - | rowspan and colspan。Typescript: `TableRowspanAndColspanFunc` `type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N +rowspanAndColspan | Function | - | rowspan and colspan。Typescript: `TableRowspanAndColspanFunc` `type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N rowspanAndColspanInFooter | Function | - | rowspan and colspan for footer。Typescript: `TableRowspanAndColspanFunc` | N scroll | Object | - | lazy load and virtual scroll。Typescript: `TScroll`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N showHeader | Boolean | true | show table header | N @@ -55,7 +56,7 @@ topContent | String / Slot / Function | - | Typescript: `string \| TNode`。[see verticalAlign | String | middle | vertical align。options: top/middle/bottom | N onActiveChange | Function | | Typescript: `(activeRowKeys: Array, context: ActiveChangeContext) => void`
trigger on row active change。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface ActiveChangeContext { activeRowList: Array<{ row: T, rowIndex: number }>; currentRowData?: T; type: 'active' \| 'inactive' }`
| N onActiveRowAction | Function | | Typescript: `(context: ActiveRowActionContext) => void`
keyboard operation event actions. used to mock selection behavior, just like macOS or windows。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface ActiveRowActionContext { action: ActiveRowActionType, activeRowList: Array<{ row: T, rowIndex: number }> }`

`type ActiveRowActionType ='shift-area-selection' \| 'space-one-selection' \| 'clear' \| 'select-all'`
| N -onCellClick | Function | | Typescript: `(context: BaseTableCellEventContext) => void`
trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N +onCellClick | Function | | Typescript: `(context: BaseTableCellEventContext) => void`
trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N onColumnResizeChange | Function | | Typescript: `(context: { columnsWidth: { [colKey: string]: number }; }) => void`
| N onPageChange | Function | | Typescript: `(pageInfo: PageInfo, newDataSource: Array) => void`
trigger on pagination changing | N onRowClick | Function | | Typescript: `(context: RowEventContext) => void`
trigger on row click。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface RowEventContext { row: T; index: number; e: MouseEvent \| KeyboardEvent }`
| N @@ -75,7 +76,7 @@ name | params | description -- | -- | -- active-change | `(activeRowKeys: Array, context: ActiveChangeContext)` | trigger on row active change。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface ActiveChangeContext { activeRowList: Array<{ row: T, rowIndex: number }>; currentRowData?: T; type: 'active' \| 'inactive' }`
active-row-action | `(context: ActiveRowActionContext)` | keyboard operation event actions. used to mock selection behavior, just like macOS or windows。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface ActiveRowActionContext { action: ActiveRowActionType, activeRowList: Array<{ row: T, rowIndex: number }> }`

`type ActiveRowActionType ='shift-area-selection' \| 'space-one-selection' \| 'clear' \| 'select-all'`
-cell-click | `(context: BaseTableCellEventContext)` | trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
+cell-click | `(context: BaseTableCellEventContext)` | trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
column-resize-change | `(context: { columnsWidth: { [colKey: string]: number }; })` | \- page-change | `(pageInfo: PageInfo, newDataSource: Array)` | trigger on pagination changing row-click | `(context: RowEventContext)` | trigger on row click。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface RowEventContext { row: T; index: number; e: MouseEvent \| KeyboardEvent }`
@@ -95,7 +96,7 @@ name | params | return | description -- | -- | -- | -- refreshTable | \- | \- | required scrollColumnIntoView | `(colKey: string)` | \- | required -scrollToElement | `(params: ComponentScrollToElementParams)` | \- | Scrolls vertically to the specified row. Example: `scrollToElement({ index: 100, top: 80, time: 200, behavior: 'smooth' })`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts#L125)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts#L325C3-L325C18) | \- | required +scrollToElement | `(params: ComponentScrollToElementParams)` | \- | Scrolls vertically to the specified row. Example: `scrollToElement({ index: 100, top: 80, time: 200, behavior: 'smooth' })`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) ### BaseTableCol @@ -105,7 +106,7 @@ align | String | left | align type。options: left/right/center | N attrs | Object / Function | - | html attributes。Typescript: `BaseTableColumnAttributes` `type BaseTableColumnAttributes = { [key: string]: any } \| ((context: CellData) => { [key: string]: any })`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N cell | String / Function | - | use cell to render table cell。Typescript: `string \| TNode>` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N children | Array | - | grouping table head。Typescript: `Array>` | N -className | String / Object / Array / Function | - | cell classnames。Typescript: `TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N +className | String / Object / Array / Function | - | cell classnames。Typescript: `TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N colKey | String | - | unique key for column | N colspan | Number | - | one line head colspan | N ellipsis | Boolean / Object / Slot / Function | false | ellipsis cell content。Typescript: `boolean \| TNode> \| TooltipProps \| { props: TooltipProps; content: TNode> }`,[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N @@ -164,7 +165,7 @@ onAsyncLoadingClick | Function | | Typescript: `(context: { status: 'loading' \ onCellClick | Function | | Typescript: `(context: PrimaryTableCellEventContext) => void`
trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface PrimaryTableCellEventContext { row: T; col: PrimaryTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N onChange | Function | | Typescript: `(data: TableChangeData, context: TableChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface TableChangeData { sorter?: TableSort; filter?: FilterValue; pagination?: PaginationProps }`

`interface TableChangeContext { trigger: TableChangeTrigger; currentData?: T[] }`

`type TableChangeTrigger = 'filter' \| 'sorter' \| 'pagination'`
| N onColumnChange | Function | | Typescript: `(context: PrimaryTableColumnChange) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface PrimaryTableColumnChange { columns?: CheckboxGroupValue; currentColumn?: PrimaryTableCol; type?: 'check' \| 'uncheck'; e?: Event }`
| N -onColumnControllerVisibleChange | Function | | Typescript:`(visible: boolean, context: { trigger: 'cancel' \| 'confirm' \| 'open'}) => void`
| N +onColumnControllerVisibleChange | Function | | Typescript: `(visible: boolean, context: { trigger: 'cancel' \| 'confirm' }) => void`
| N onDataChange | Function | | Typescript: `(data: Array, context: TableDataChangeContext) => void`
trigger on data changing。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface TableDataChangeContext { trigger: 'sort' }`
| N onDisplayColumnsChange | Function | | Typescript: `(value: CheckboxGroupValue) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`import { CheckboxGroupValue } from '@Checkbox'`
| N onDragSort | Function | | Typescript: `(context: DragSortContext) => void`
trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface DragSortContext { currentIndex: number; current: T; targetIndex: number; target: T; data: T[]; newData: T[]; currentData?: T[]; e: SortableEvent; sort: 'row' \| 'col' }`

`import { SortableEvent, SortableOptions } from 'sortablejs'`
| N @@ -283,15 +284,16 @@ rowIndex | Number | - | required | Y name | type | default | description | required -- | -- | -- | -- | -- -attrs | Object | - | html attributes of component。Typescript:`HTMLElementAttributes`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -classNames | String | - | component class names。Typescript:`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -component | Slot / Function | - | Typescript:`ComponentType`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -confirmEvents | Array | - | Typescript:`string[]` | N -label | String / Function | - | filter column title text, used to be showed in filter row。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -list | Array | - | Typescript:`Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N -props | Object | - | Typescript:`FilterProps` `type FilterProps = RadioProps \| CheckboxProps \| InputProps \| { [key: string]: any }`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N -resetValue | \- | - | Typescript:`any` | N +attrs | Object | - | html attributes of component。Typescript: `HTMLElementAttributes`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +classNames | String | - | component class names。Typescript: `ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +component | Slot / Function | - | Typescript: `ComponentType`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +confirmEvents | Array | - | Typescript: `string[]` | N +label | String / Function | - | filter column title text, used to be showed in filter row。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +list | Array | - | Typescript: `Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +listFilterConfig | Object | false | config of `filter.list`, used to filter `list`. `listFilterConfig=true` means default filter function used. `listFilterConfig.filterMethod` used to custom filter rules。Typescript: `boolean \| ListFilterConfig` `interface ListFilterConfig { filterMethod?: (item: OptionData, keyword: string) => boolean; props?: InputProps; className?: string; style?: Styles; slots?: { [key: string]: () => JSX.Element }}`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N +popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N +props | Object | - | Typescript: `FilterProps` `type FilterProps = RadioProps \| CheckboxProps \| InputProps \| { [key: string]: any }`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N +resetValue | \- | - | Typescript: `any` | N showConfirmAndReset | Boolean | false | \- | N style | Object | - | styles of component。Typescript: `Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N type | String | - | Typescript: `FilterType` `type FilterType = 'input' \| 'single' \| 'multiple'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N diff --git a/packages/components/table/table.md b/packages/components/table/table.md index c910b81e0a..e801cb52d4 100644 --- a/packages/components/table/table.md +++ b/packages/components/table/table.md @@ -19,6 +19,7 @@ data | Array | [] | 数据源,泛型 T 指表格数据类型。TS 类型:`Ar disableDataPage | Boolean | false | 是否禁用本地数据分页。当 `data` 数据长度超过分页大小时,会自动进行本地数据分页。如果 `disableDataPage` 设置为 true,则无论何时,都不会进行本地数据分页 | N disableSpaceInactiveRow | Boolean | undefined | 默认重复按下 Space 键可取消当前行高亮,是否禁用取消 | N empty | String / Slot / Function | '' | 空表格呈现样式,支持全局配置 `GlobalConfigProvider`。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +enableLockScrollbar | Boolean | false | 切换分页时是否锁定滚动条。开启后,切换分页时不会重置滚动条位置。 | N firstFullRow | String / Slot / Function | - | 首行内容,横跨所有列。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N fixedRows | Array | - | 固定行(冻结行),示例:[M, N],表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时,表示不冻结行。TS 类型:`Array` | N footData | Array | [] | 表尾数据源,泛型 T 指表格数据类型。TS 类型:`Array` | N @@ -41,9 +42,9 @@ pagination | Object | - | 分页配置,值为空则不显示。具体 API 参 paginationAffixedBottom | Boolean / Object | - | 分页吸底。基于 Affix 组件开发,透传全部 Affix 组件属性。TS 类型:`boolean \| Partial` | N resizable | Boolean | false | 是否允许调整列宽,设置 `tableLayout=fixed` 效果更友好,此时不允许通过 CSS 设置 `table`元素宽度,也不允许设置 `tableContentWidth`。一般不建议在列宽调整场景使用 `tableLayout: auto`。如果想要配置宽度可调整的最小值和最大值,请使用 `column.resize`,示例:`columns: [{ resize: { minWidth: 120, maxWidth: 300 } }]`。
默认规则:因列宽超出存在横向滚动条时,列宽调整仅影响当前列宽和总列宽;表格列较少没有横向滚动条时,列宽调整表现为自身宽度和相邻宽度变化 | N rowAttributes | Object / Array / Function | - | HTML 标签 `tr` 的属性。类型为 Function 时,参数说明:`params.row` 表示行数据;`params.rowIndex` 表示行下标;`params.type=body` 表示属性作用于 `tbody` 中的元素;`params.type=foot` 表示属性作用于 `tfoot` 中的元素。
示例一:{ draggable: true },
示例二:[{ draggable: true }, { title: '超出省略显示' }]。
示例三:() => [{ draggable: true }]。TS 类型:`TableRowAttributes` `type TableRowAttributes = HTMLElementAttributes \| ((params: { row: T; rowIndex: number; type: 'body' \| 'foot' }) => HTMLElementAttributes) \| Array>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N -rowClassName | String / Object / Array / Function | - | 行类名,泛型 T 指表格数据类型。`params.row` 表示行数据;`params.rowIndex` 表示行下标;`params.type=body` 表示类名作用于 `tbody` 中的元素;`params.type= tfoot` 表示类名作用于 `tfoot` 中的元素。TS 类型:`ClassName \| ((params: RowClassNameParams) => ClassName)` `interface RowClassNameParams { row: T; rowIndex: number; type?: 'body' \| 'foot' }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N +rowClassName | String / Object / Array / Function | - | 行类名,泛型 T 指表格数据类型。`params.row` 表示行数据;`params.rowIndex` 表示行下标;`params.type=body` 表示类名作用于 `tbody` 中的元素;`params.type= tfoot` 表示类名作用于 `tfoot` 中的元素。TS 类型:`ClassName \| ((params: RowClassNameParams) => ClassName)` `interface RowClassNameParams { row: T; rowIndex: number; rowKey?: string; type?: 'body' \| 'foot' }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N rowKey | String | 'id' | 必需。唯一标识一行数据的字段名,来源于 `data` 中的字段。如果是字段嵌套多层,可以设置形如 `item.a.id` 的方法 | Y -rowspanAndColspan | Function | - | 用于自定义合并单元格,泛型 T 指表格数据类型。示例:`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`。TS 类型:`TableRowspanAndColspanFunc` `type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N +rowspanAndColspan | Function | - | 用于自定义合并单元格,泛型 T 指表格数据类型。示例:`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`。TS 类型:`TableRowspanAndColspanFunc` `type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N rowspanAndColspanInFooter | Function | - | 用于自定义表尾的合并单元格,泛型 T 指表格数据类型。示例:`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`。TS 类型:`TableRowspanAndColspanFunc` | N scroll | Object | - | 懒加载和虚拟滚动。为保证组件收益最大化,当数据量小于阈值 `scroll.threshold` 时,无论虚拟滚动的配置是否存在,组件内部都不会开启虚拟滚动,`scroll.threshold` 默认为 `100`。TS 类型:`TScroll`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N showHeader | Boolean | true | 是否显示表头 | N @@ -55,7 +56,7 @@ topContent | String / Slot / Function | - | 表格顶部内容,可以用于自 verticalAlign | String | middle | 行内容上下方向对齐。可选项:top/middle/bottom | N onActiveChange | Function | | TS 类型:`(activeRowKeys: Array, context: ActiveChangeContext) => void`
高亮行发生变化时触发,泛型 T 指表格数据类型。参数 `activeRowList` 表示所有高亮行数据, `currentRowData` 表示当前操作行数据。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface ActiveChangeContext { activeRowList: Array<{ row: T, rowIndex: number }>; currentRowData?: T; type: 'active' \| 'inactive' }`
| N onActiveRowAction | Function | | TS 类型:`(context: ActiveRowActionContext) => void`
键盘操作事件。开启行高亮功能后,会自动开启键盘操作功能,如:通过键盘(Shift)或鼠标操作连续选中高亮行时触发,一般用于处理行选中等批量操作,模拟操作系统区域选择行为。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface ActiveRowActionContext { action: ActiveRowActionType, activeRowList: Array<{ row: T, rowIndex: number }> }`

`type ActiveRowActionType ='shift-area-selection' \| 'space-one-selection' \| 'clear' \| 'select-all'`
| N -onCellClick | Function | | TS 类型:`(context: BaseTableCellEventContext) => void`
单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N +onCellClick | Function | | TS 类型:`(context: BaseTableCellEventContext) => void`
单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N onColumnResizeChange | Function | | TS 类型:`(context: { columnsWidth: { [colKey: string]: number }; }) => void`
列调整大小之后触发。`context.columnsWidth` 表示操作后各个列的宽度; | N onPageChange | Function | | TS 类型:`(pageInfo: PageInfo, newDataSource: Array) => void`
分页发生变化时触发。参数 newDataSource 表示分页后的数据。本地数据进行分页时,newDataSource 和源数据 data 会不一样。泛型 T 指表格数据类型 | N onRowClick | Function | | TS 类型:`(context: RowEventContext) => void`
行点击时触发,泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface RowEventContext { row: T; index: number; e: MouseEvent \| KeyboardEvent }`
| N @@ -75,7 +76,7 @@ onScrollY | Function | | TS 类型:`(params: { e: WheelEvent }) => void`
-- | -- | -- active-change | `(activeRowKeys: Array, context: ActiveChangeContext)` | 高亮行发生变化时触发,泛型 T 指表格数据类型。参数 `activeRowList` 表示所有高亮行数据, `currentRowData` 表示当前操作行数据。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface ActiveChangeContext { activeRowList: Array<{ row: T, rowIndex: number }>; currentRowData?: T; type: 'active' \| 'inactive' }`
active-row-action | `(context: ActiveRowActionContext)` | 键盘操作事件。开启行高亮功能后,会自动开启键盘操作功能,如:通过键盘(Shift)或鼠标操作连续选中高亮行时触发,一般用于处理行选中等批量操作,模拟操作系统区域选择行为。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface ActiveRowActionContext { action: ActiveRowActionType, activeRowList: Array<{ row: T, rowIndex: number }> }`

`type ActiveRowActionType ='shift-area-selection' \| 'space-one-selection' \| 'clear' \| 'select-all'`
-cell-click | `(context: BaseTableCellEventContext)` | 单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
+cell-click | `(context: BaseTableCellEventContext)` | 单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
column-resize-change | `(context: { columnsWidth: { [colKey: string]: number }; })` | 列调整大小之后触发。`context.columnsWidth` 表示操作后各个列的宽度; page-change | `(pageInfo: PageInfo, newDataSource: Array)` | 分页发生变化时触发。参数 newDataSource 表示分页后的数据。本地数据进行分页时,newDataSource 和源数据 data 会不一样。泛型 T 指表格数据类型 row-click | `(context: RowEventContext)` | 行点击时触发,泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface RowEventContext { row: T; index: number; e: MouseEvent \| KeyboardEvent }`
@@ -95,7 +96,7 @@ scroll-y | `(params: { e: WheelEvent })` | 已废弃。表格内容纵向滚动 -- | -- | -- | -- refreshTable | \- | \- | 必需。全部重新渲染表格 scrollColumnIntoView | `(colKey: string)` | \- | 必需。横向滚动到指定列,呈现在可视范围内 -scrollToElement | `(params: ComponentScrollToElementParams)` | \- | 纵向滚动到指定行。示例:`scrollToElement({ index: 100, top: 80, time: 200, behavior: 'smooth' })`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts#L125)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts#L325C3-L325C18) +scrollToElement | `(params: ComponentScrollToElementParams)` | \- | 纵向滚动到指定行。示例:`scrollToElement({ index: 100, top: 80, time: 200, behavior: 'smooth' })`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) ### BaseTableCol @@ -105,7 +106,7 @@ align | String | left | 列横向对齐方式。可选项:left/right/center | attrs | Object / Function | - | 透传 HTML 属性到列元素。TS 类型:`BaseTableColumnAttributes` `type BaseTableColumnAttributes = { [key: string]: any } \| ((context: CellData) => { [key: string]: any })`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N cell | String / Function | - | 自定义单元格渲染。默认使用 `colKey` 的值作为自定义当前列的插槽名称。
如果 `cell` 值类型为 Function 表示以函数形式渲染单元格。值类型为 string 表示使用插槽渲染,插槽名称为 cell 的值。优先级高于 `render`。泛型 T 指表格数据类型。TS 类型:`string \| TNode>` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N children | Array | - | 用于多级表头,泛型 T 指表格数据类型。TS 类型:`Array>` | N -className | String / Object / Array / Function | - | 列类名,值类型是 Function 使用返回值作为列类名;值类型不为 Function 时,值用于整列类名(含表头)。泛型 T 指表格数据类型。TS 类型:`TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N +className | String / Object / Array / Function | - | 列类名,值类型是 Function 使用返回值作为列类名;值类型不为 Function 时,值用于整列类名(含表头)。泛型 T 指表格数据类型。TS 类型:`TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N colKey | String | - | 渲染列所需字段,值为 `serial-number` 表示当前列为「序号」列 | N colspan | Number | - | 单行表头合并列。多行表头请参考「多级表头」文档示例 | N ellipsis | Boolean / Object / Slot / Function | false | 单元格和表头内容超出时,是否显示省略号。如果仅希望单元格超出省略,可设置 `ellipsisTitle = false`。
值为 `true`,则超出省略浮层默认显示单元格内容;
值类型为 `Function` 则自定义超出省略浮中层显示的内容;
值类型为 `Object`,则自动透传属性到 Tooltip 组件,可用于调整浮层背景色和方向等特性。
同时透传 Tooltip 属性和自定义浮层内容,请使用 `{ props: { theme: 'light' }, content: () => 'something' }`。
请注意单元格超出省略的两个基本点:1. 内容元素是内联元素或样式(自定义单元格内容时需特别注意);2. 内容超出父元素。TS 类型:`boolean \| TNode> \| TooltipProps \| { props: TooltipProps; content: TNode> }`,[Tooltip API Documents](./tooltip?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N @@ -164,7 +165,7 @@ onAsyncLoadingClick | Function | | TS 类型:`(context: { status: 'loading' \ onCellClick | Function | | TS 类型:`(context: PrimaryTableCellEventContext) => void`
单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface PrimaryTableCellEventContext { row: T; col: PrimaryTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N onChange | Function | | TS 类型:`(data: TableChangeData, context: TableChangeContext) => void`
分页、排序、过滤等内容变化时触发,泛型 T 指表格数据类型,`currentData` 表示变化后的数据。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface TableChangeData { sorter?: TableSort; filter?: FilterValue; pagination?: PaginationProps }`

`interface TableChangeContext { trigger: TableChangeTrigger; currentData?: T[] }`

`type TableChangeTrigger = 'filter' \| 'sorter' \| 'pagination'`
| N onColumnChange | Function | | TS 类型:`(context: PrimaryTableColumnChange) => void`
确认操作之前列配置发生变化时触发。`context.columns` 表示已选中的列;`context.currentColumn` 表示本次变化操作的列,值不存在表示全选操作;`context.type` 表示当前操作属于选中列或是取消列。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface PrimaryTableColumnChange { columns?: CheckboxGroupValue; currentColumn?: PrimaryTableCol; type?: 'check' \| 'uncheck'; e?: Event }`
| N -onColumnControllerVisibleChange | Function | | TS 类型:`(visible: boolean, context: { trigger: 'cancel' \| 'confirm' \| 'open' }) => void`
列配置弹窗显示或隐藏变化时触发。`visible` 表示弹窗是否可见;`context.trigger` 表示触发来源:`'open'` 表示打开弹窗,`'confirm'` 表示点击确认按钮关闭,`'cancel'` 表示点击取消按钮或其他方式关闭 | N +onColumnControllerVisibleChange | Function | | TS 类型:`(visible: boolean, context: { trigger: 'cancel' \| 'confirm' }) => void`
列配置弹窗显示或隐藏变化时触发 | N onDataChange | Function | | TS 类型:`(data: Array, context: TableDataChangeContext) => void`
本地数据排序导致 `data` 变化时触发,第一个参数指变化后的数据,第二个参数 `context.trigger` 表示触发本次变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface TableDataChangeContext { trigger: 'sort' }`
| N onDisplayColumnsChange | Function | | TS 类型:`(value: CheckboxGroupValue) => void`
确认列配置时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`import { CheckboxGroupValue } from '@Checkbox'`
| N onDragSort | Function | | TS 类型:`(context: DragSortContext) => void`
拖拽排序时触发,`data` 表示排序前的数据,`newData` 表示拖拽排序结束后的新数据,`sort=row` 表示行拖拽事件触发,`sort=col` 表示列拖拽事件触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface DragSortContext { currentIndex: number; current: T; targetIndex: number; target: T; data: T[]; newData: T[]; currentData?: T[]; e: SortableEvent; sort: 'row' \| 'col' }`

`import { SortableEvent, SortableOptions } from 'sortablejs'`
| N @@ -174,7 +175,7 @@ onRowEdit | Function | | TS 类型:`(context: PrimaryTableRowEditContext) onRowValidate | Function | | TS 类型:`(context: PrimaryTableRowValidateContext) => void`
行编辑校验完成后触发,即组件实例方法 `validateRowData` 执行结束后触发。`result` 表示校验结果,`trigger=self` 表示编辑组件内部触发的校验,`trigger='parent'` 表示表格父组件触发的校验。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`type PrimaryTableRowValidateContext = { result: TableRowValidateResult[]; trigger: TableValidateTrigger }`

`type TableValidateTrigger = 'self' \| 'parent'`

`export type TableRowValidateResult = PrimaryTableCellParams & { errorList: AllValidateResult[]; value: any }`
| N onSelectChange | Function | | TS 类型:`(selectedRowKeys: Array, options: SelectOptions) => void`
选中行发生变化时触发,泛型 T 指表格数据类型。两个参数,第一个参数为选中行 keys,第二个参数为更多参数,具体如下:`type = uncheck` 表示当前行操作为「取消行选中」;`type = check` 表示当前行操作为「行选中」; `currentRowKey` 表示当前操作行的 rowKey 值; `currentRowData` 表示当前操作行的行数据。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface SelectOptions { selectedRowData: Array; type: 'uncheck' \| 'check'; currentRowKey?: string; currentRowData?: T }`
| N onSortChange | Function | | TS 类型:`(sort: TableSort, options: SortOptions) => void`
排序发生变化时触发。其中 sortBy 表示当前排序的字段,sortType 表示排序的方式,currentDataSource 表示 sorter 排序后的结果,col 表示列配置。sort 值类型为数组时表示多字段排序。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface SortOptions { currentDataSource?: Array; col: PrimaryTableCol }`
| N -onValidate | Function | | TS 类型:`(context: PrimaryTableValidateContext) => void`
可编辑行表格,全部数据校验完成后触发。即组件实例方法 `validateTableData` 或 `validateTableCellData` 执行结束后触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface PrimaryTableValidateContext { result: TableErrorListMap }`

`type TableErrorListMap = { [key: string]: AllValidateResult[] }`
| N +onValidate | Function | | TS 类型:`(context: PrimaryTableValidateContext) => void`
可编辑行表格,全部数据校验完成后触发。即组件实例方法 `validateTableData` 执行结束后触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)。
`interface PrimaryTableValidateContext { result: TableErrorListMap }`

`type TableErrorListMap = { [key: string]: AllValidateResult[] }`
| N ### PrimaryTable Events @@ -289,6 +290,7 @@ component | Slot / Function | - | 用于自定义筛选器,只要保证自定 confirmEvents | Array | - | 哪些事件触发后会进行过滤搜索(确认按钮无需配置,会默认触发搜索)。输入框组件示例:`confirmEvents: ['onEnter']`。TS 类型:`string[]` | N label | String / Function | - | 过滤项标题文本,显示在“过滤结果行”中的列标题描述。一般用于表头标题和过滤文本行中的列标题不一样的场景。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N list | Array | - | 用于配置当前筛选器可选值有哪些,仅当 `filter.type` 等于 `single` 或 `multiple` 时有效。TS 类型:`Array`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +listFilterConfig | Object | false | 选项过滤功能配置,`listFilterConfig=true` 表示使用默认过滤功能和组件风格,`listFilterConfig.filterMethod` 用于自定义过滤方法,其中 `props/className/style` 分别表示透传属性、类名、样式到输入框组件。TS 类型:`boolean \| ListFilterConfig` `interface ListFilterConfig { filterMethod?: (item: OptionData, keyword: string) => boolean; props?: InputProps; className?: string; style?: Styles; slots?: { [key: string]: () => JSX.Element }}`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N popupProps | Object | - | 透传 Popup 组件全部属性到筛选器浮层。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N props | Object | - | 用于透传筛选器属性到自定义组件 `component`,可以对筛选器进行任何原组件支持的属性配置。TS 类型:`FilterProps` `type FilterProps = RadioProps \| CheckboxProps \| InputProps \| { [key: string]: any }`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts) | N resetValue | \- | - | 重置时设置的值,示例:'' 或 []。TS 类型:`any` | N diff --git a/packages/components/table/type.ts b/packages/components/table/type.ts index acdcedcc95..7280c630a9 100644 --- a/packages/components/table/type.ts +++ b/packages/components/table/type.ts @@ -19,7 +19,7 @@ import { ButtonProps } from '../button'; import { CheckboxGroupProps } from '../checkbox'; import { DialogProps } from '../dialog'; import { FormRule, AllValidateResult } from '../form'; -import { +import type { TNode, OptionData, SizeEnum, @@ -94,6 +94,11 @@ export interface TdBaseTableProps { * @default '' */ empty?: string | TNode; + /** + * 切换分页时是否锁定滚动条。开启后,切换分页时不会重置滚动条位置。 + * @default false + */ + enableLockScrollbar?: boolean; /** * 首行内容,横跨所有列 */ @@ -322,7 +327,7 @@ export interface BaseTableInstanceFunctions void; + scrollToElement?: (params: ComponentScrollToElementParams) => void; } export interface BaseTableCol { @@ -449,7 +454,7 @@ export interface TdPrimaryTableProps */ defaultDisplayColumns?: CheckboxGroupValue; /** - * 拖拽排序方式,值为 `row` 表示行拖拽排序,这种方式无法进行文本复制,慎用。值为`row-handler` 表示通过拖拽手柄进行行拖拽排序。值为 `col` 表示列顺序拖拽。值为 `row-handler-col` 表示同时支持行拖拽和列拖拽。⚠️`drag-col` 已废弃,请勿使用。 + * 拖拽排序方式,值为 `row` 表示行拖拽排序,这种方式无法进行文本复制,慎用。值为`row-handler` 表示通过拖拽手柄进行行拖拽排序。值为 `col` 表示列顺序拖拽。值为 `row-handler-col` 表示同时支持行拖拽和列拖拽。⚠️`drag-col` 已废弃,请勿使用 */ dragSort?: 'row' | 'row-handler' | 'col' | 'row-handler-col' | 'drag-col'; /** @@ -1038,7 +1043,9 @@ export interface RowClassNameParams { type?: 'body' | 'foot'; } -export type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan; +export type TableRowspanAndColspanFunc = ( + params: BaseTableCellParams, +) => RowspanColspan; export interface RowspanColspan { colspan?: number; @@ -1058,9 +1065,9 @@ export interface ActiveRowActionContext { export type ActiveRowActionType = 'shift-area-selection' | 'space-one-selection' | 'clear' | 'select-all'; -export interface BaseTableCellEventContext { +export interface BaseTableCellEventContext { row: T; - col: BaseTableCol; + col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent; @@ -1086,9 +1093,11 @@ export interface BaseTableCellParams { colIndex: number; } -export type TableColumnClassName = ClassName | ((context: CellData) => ClassName); +export type TableColumnClassName = + | ClassName + | ((context: CellData) => ClassName); -export interface CellData extends BaseTableCellParams { +export interface CellData extends BaseTableCellParams { type: 'th' | 'td'; }