From bea4cdc853bd186bb186d1f13cf38ea8a7bb2cd4 Mon Sep 17 00:00:00 2001 From: Wesley <985189328@qq.com> Date: Tue, 21 Jul 2026 16:25:57 +0800 Subject: [PATCH] feat: enableLockScrollbar --- db/TDesign.db | Bin 1150976 -> 1155072 bytes .../packages/components/t-scroll/type.ts | 2 +- .../packages/components/table/defaultProps.ts | 1 + .../packages/components/table/table.en-US.md | 7 +-- .../packages/components/table/table.md | 7 +-- .../packages/components/table/type.ts | 41 +++++++++++------- .../packages/components/t-scroll/type.ts | 2 +- .../components/table/base-table-props.ts | 2 + .../packages/components/table/table.en-US.md | 9 ++-- .../packages/components/table/table.md | 9 ++-- .../packages/components/table/type.ts | 39 ++++++++++------- .../products/tdesign-vue/src/t-scroll/type.ts | 2 +- .../tdesign-vue/src/table/base-table-props.ts | 2 + .../tdesign-vue/src/table/table.en-US.md | 9 ++-- .../products/tdesign-vue/src/table/table.md | 9 ++-- .../products/tdesign-vue/src/table/type.ts | 39 ++++++++++------- packages/scripts/api.json | 39 +++++++++++++++++ 17 files changed, 148 insertions(+), 71 deletions(-) diff --git a/db/TDesign.db b/db/TDesign.db index 463c743016a09fca6374c04130f6a9c3ba6b51f3..301240b51525fc40b00508aad2038257bd528a73 100644 GIT binary patch delta 427 zcmZoz;MQ=!ZGtqbG6Msn)IzlXY|KHyrFA(zqG5_{!mI8WgjBeXm9Rzxrn7Hpu-{B-6vwee;z+w)@p6Map0zGV5@j6X{ zA??q+1-3u)7L;<~;$;BZ&2P%UZ@N{HGnaF_fdKn@*80Ylzs<7+6>t8Cw|}U=acU2UVkQ delta 179 zcmZoT;MTCfZGtqbA_D`XrF9%m&2lK+FNeoIuP4#N0s4 z1H`;Q%m>8$+pk#)=&>=nZfA86=w+I|%}GFR`vxb0#T<;&riXY7^sr^zu71e>to@m{ L!1ia}f>JI3zDz+* diff --git a/packages/products/tdesign-react/packages/components/t-scroll/type.ts b/packages/products/tdesign-react/packages/components/t-scroll/type.ts index 937b6fde0..a337b8065 100644 --- a/packages/products/tdesign-react/packages/components/t-scroll/type.ts +++ b/packages/products/tdesign-react/packages/components/t-scroll/type.ts @@ -4,7 +4,7 @@ * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC * */ -import { TScroll } from '../common'; +import type { TScroll } from '../common'; export interface TScroll { /** diff --git a/packages/products/tdesign-react/packages/components/table/defaultProps.ts b/packages/products/tdesign-react/packages/components/table/defaultProps.ts index 1ab539e97..71c6954f3 100644 --- a/packages/products/tdesign-react/packages/components/table/defaultProps.ts +++ b/packages/products/tdesign-react/packages/components/table/defaultProps.ts @@ -12,6 +12,7 @@ export const baseTableDefaultProps: TdBaseTableProps = { disableDataPage: false, disableSpaceInactiveRow: undefined, empty: '', + enableLockScrollbar: false, footData: [], footerAffixedBottom: false, headerAffixedTop: false, diff --git a/packages/products/tdesign-react/packages/components/table/table.en-US.md b/packages/products/tdesign-react/packages/components/table/table.en-US.md index 1ae0e5cf4..17bf35601 100644 --- a/packages/products/tdesign-react/packages/components/table/table.en-US.md +++ b/packages/products/tdesign-react/packages/components/table/table.en-US.md @@ -20,6 +20,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 | TNode | '' | empty text or empty element。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +enableLockScrollbar | Boolean | false | \- | N firstFullRow | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N fixedRows | Array | - | Typescript: `Array` | N footData | Array | [] | table foot data。Typescript: `Array` | N @@ -44,7 +45,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-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/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-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/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-react/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-react/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-react/blob/develop/packages/components/common.ts) | N showHeader | Boolean | true | show table header | N @@ -56,7 +57,7 @@ topContent | TNode | - | Typescript: `string \| TNode`。[see more ts definition 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-react/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-react/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-react/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-react/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-react/blob/develop/packages/components/table/type.ts)。
`interface RowEventContext { row: T; index: number; e: MouseEvent \| KeyboardEvent }`
| N @@ -88,7 +89,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-react/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-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/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-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/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-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N colKey | String | - | unique key for column | N colspan | Number | - | one line head colspan | N ellipsis | TNode | 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-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N diff --git a/packages/products/tdesign-react/packages/components/table/table.md b/packages/products/tdesign-react/packages/components/table/table.md index 7294abaff..60c1b80b8 100644 --- a/packages/products/tdesign-react/packages/components/table/table.md +++ b/packages/products/tdesign-react/packages/components/table/table.md @@ -20,6 +20,7 @@ data | Array | [] | 数据源,泛型 T 指表格数据类型。TS 类型:`Ar disableDataPage | Boolean | false | 是否禁用本地数据分页。当 `data` 数据长度超过分页大小时,会自动进行本地数据分页。如果 `disableDataPage` 设置为 true,则无论何时,都不会进行本地数据分页 | N disableSpaceInactiveRow | Boolean | undefined | 默认重复按下 Space 键可取消当前行高亮,是否禁用取消 | N empty | TNode | '' | 空表格呈现样式,支持全局配置 `GlobalConfigProvider`。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +enableLockScrollbar | Boolean | false | 切换分页时是否锁定滚动条。开启后,切换分页时不会重置滚动条位置。 | N firstFullRow | TNode | - | 首行内容,横跨所有列。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/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 @@ -44,7 +45,7 @@ resizable | Boolean | false | 是否允许调整列宽,设置 `tableLayout=fix 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-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/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-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/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-react/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-react/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-react/blob/develop/packages/components/common.ts) | N showHeader | Boolean | true | 是否显示表头 | N @@ -56,7 +57,7 @@ topContent | TNode | - | 表格顶部内容,可以用于自定义列设置、 verticalAlign | String | middle | 行内容上下方向对齐。可选项:top/middle/bottom | N onActiveChange | Function | | TS 类型:`(activeRowKeys: Array, context: ActiveChangeContext) => void`
高亮行发生变化时触发,泛型 T 指表格数据类型。参数 `activeRowList` 表示所有高亮行数据, `currentRowData` 表示当前操作行数据。[详细类型定义](https://github.com/Tencent/tdesign-react/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-react/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-react/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-react/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-react/blob/develop/packages/components/table/type.ts)。
`interface RowEventContext { row: T; index: number; e: MouseEvent \| KeyboardEvent }`
| N @@ -88,7 +89,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-react/blob/develop/packages/components/table/type.ts) | N cell | String / Function | - | 自定义单元格渲染,优先级高于 `render`。泛型 T 指表格数据类型。TS 类型:`string \| TNode>` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/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-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/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-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N colKey | String | - | 渲染列所需字段,值为 `serial-number` 表示当前列为「序号」列 | N colspan | Number | - | 单行表头合并列。多行表头请参考「多级表头」文档示例 | N ellipsis | TNode | 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-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N diff --git a/packages/products/tdesign-react/packages/components/table/type.ts b/packages/products/tdesign-react/packages/components/table/type.ts index 2c7862308..a345291d6 100644 --- a/packages/products/tdesign-react/packages/components/table/type.ts +++ b/packages/products/tdesign-react/packages/components/table/type.ts @@ -18,7 +18,7 @@ import { ButtonProps } from '../button'; import { CheckboxGroupProps } from '../checkbox'; import { DialogProps } from '../dialog'; import { FormRule, AllValidateResult } from '../form'; -import { +import type { TNode, TElement, OptionData, @@ -31,7 +31,7 @@ import { TScroll, ComponentScrollToElementParams, } from '../common'; -import { MouseEvent, KeyboardEvent, WheelEvent, ChangeEvent } from 'react'; +import type { MouseEvent, KeyboardEvent, WheelEvent, ChangeEvent } from 'react'; export interface TdBaseTableProps { /** @@ -90,6 +90,11 @@ export interface TdBaseTableProps { * @default '' */ empty?: TNode; + /** + * 切换分页时是否锁定滚动条。开启后,切换分页时不会重置滚动条位置。 + * @default false + */ + enableLockScrollbar?: boolean; /** * 首行内容,横跨所有列 */ @@ -393,8 +398,10 @@ export interface BaseTableCol { width?: string | number; } -export interface TdPrimaryTableProps - extends Omit, 'columns' | 'onCellClick'> { +export interface TdPrimaryTableProps extends Omit< + TdBaseTableProps, + 'columns' | 'onCellClick' +> { /** * 异步加载状态。值为 `loading` 显示默认文字 “正在加载中,请稍后”,值为 `load-more` 显示“点击加载更多”,值为其他,表示完全自定义异步加载区域内容 */ @@ -618,8 +625,10 @@ export interface PrimaryTableInstanceFunctions Promise<{ result: TableErrorListMap }>; } -export interface PrimaryTableCol - extends Omit { +export interface PrimaryTableCol extends Omit< + BaseTableCol, + 'cell' | 'title' | 'render' | 'children' +> { /** * 自定义单元格渲染,优先级高于 render。泛型 T 指表格数据类型 */ @@ -1008,7 +1017,9 @@ export interface RowClassNameParams { type?: 'body' | 'foot'; } -export type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan; +export type TableRowspanAndColspanFunc = ( + params: BaseTableCellParams, +) => RowspanColspan; export interface RowspanColspan { colspan?: number; @@ -1028,9 +1039,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; @@ -1056,9 +1067,10 @@ 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'; } @@ -1192,9 +1204,7 @@ export interface PrimaryTableCellParams { } export type CheckProps = - | CheckboxProps - | RadioProps - | ((options: { row: T; rowIndex: number }) => CheckboxProps | RadioProps); + CheckboxProps | RadioProps | ((options: { row: T; rowIndex: number }) => CheckboxProps | RadioProps); export interface PrimaryTableRenderParams extends PrimaryTableCellParams { type: RenderType; @@ -1247,8 +1257,7 @@ export interface TableColumnGroup { export type PrimaryTableOnEditedContext = PrimaryTableCellParams & { trigger: string; newRowData: T }; export type TableEditableCellProps = - | TablePlainObject - | ((params: TableEditableCellPropsParams) => TablePlainObject); + TablePlainObject | ((params: TableEditableCellPropsParams) => TablePlainObject); export interface TableEditableCellPropsParams extends PrimaryTableCellParams { editedRow: T; diff --git a/packages/products/tdesign-vue-next/packages/components/t-scroll/type.ts b/packages/products/tdesign-vue-next/packages/components/t-scroll/type.ts index 937b6fde0..a337b8065 100644 --- a/packages/products/tdesign-vue-next/packages/components/t-scroll/type.ts +++ b/packages/products/tdesign-vue-next/packages/components/t-scroll/type.ts @@ -4,7 +4,7 @@ * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC * */ -import { TScroll } from '../common'; +import type { TScroll } from '../common'; export interface TScroll { /** diff --git a/packages/products/tdesign-vue-next/packages/components/table/base-table-props.ts b/packages/products/tdesign-vue-next/packages/components/table/base-table-props.ts index 3df7f93f1..3bb64d8be 100644 --- a/packages/products/tdesign-vue-next/packages/components/table/base-table-props.ts +++ b/packages/products/tdesign-vue-next/packages/components/table/base-table-props.ts @@ -59,6 +59,8 @@ export default { type: [String, Function] as PropType, default: '' as TdBaseTableProps['empty'], }, + /** 切换分页时是否锁定滚动条。开启后,切换分页时不会重置滚动条位置。 */ + enableLockScrollbar: Boolean, /** 首行内容,横跨所有列 */ firstFullRow: { type: [String, Function] as PropType, diff --git a/packages/products/tdesign-vue-next/packages/components/table/table.en-US.md b/packages/products/tdesign-vue-next/packages/components/table/table.en-US.md index f63187059..2d2cb6196 100644 --- a/packages/products/tdesign-vue-next/packages/components/table/table.en-US.md +++ b/packages/products/tdesign-vue-next/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 }`
@@ -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 diff --git a/packages/products/tdesign-vue-next/packages/components/table/table.md b/packages/products/tdesign-vue-next/packages/components/table/table.md index da3d8d726..e801cb52d 100644 --- a/packages/products/tdesign-vue-next/packages/components/table/table.md +++ b/packages/products/tdesign-vue-next/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 @@ -43,7 +44,7 @@ resizable | Boolean | false | 是否允许调整列宽,设置 `tableLayout=fix 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; 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 }`
@@ -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 diff --git a/packages/products/tdesign-vue-next/packages/components/table/type.ts b/packages/products/tdesign-vue-next/packages/components/table/type.ts index f0c005070..6c6910a75 100644 --- a/packages/products/tdesign-vue-next/packages/components/table/type.ts +++ b/packages/products/tdesign-vue-next/packages/components/table/type.ts @@ -18,7 +18,7 @@ import { ButtonProps } from '../button'; import { CheckboxGroupProps } from '../checkbox'; import { DialogProps } from '../dialog'; import { FormRule, AllValidateResult } from '../form'; -import { +import type { TNode, OptionData, SizeEnum, @@ -88,6 +88,11 @@ export interface TdBaseTableProps { * @default '' */ empty?: string | TNode; + /** + * 切换分页时是否锁定滚动条。开启后,切换分页时不会重置滚动条位置。 + * @default false + */ + enableLockScrollbar?: boolean; /** * 首行内容,横跨所有列 */ @@ -391,8 +396,10 @@ export interface BaseTableCol { width?: string | number; } -export interface TdPrimaryTableProps - extends Omit, 'columns' | 'onCellClick'> { +export interface TdPrimaryTableProps extends Omit< + TdBaseTableProps, + 'columns' | 'onCellClick' +> { /** * 异步加载状态。值为 `loading` 显示默认文字 “正在加载中,请稍后”,值为 `load-more` 显示“点击加载更多”,值为其他,表示完全自定义异步加载区域内容 */ @@ -616,8 +623,10 @@ export interface PrimaryTableInstanceFunctions Promise<{ result: TableErrorListMap }>; } -export interface PrimaryTableCol - extends Omit { +export interface PrimaryTableCol extends Omit< + BaseTableCol, + 'cell' | 'title' | 'render' | 'children' +> { /** * 自定义单元格渲染。值类型为 Function 表示以函数形式渲染单元格。值类型为 string 表示使用插槽渲染,插槽名称为 cell 的值。默认使用 colKey 作为插槽名称。优先级高于 render。泛型 T 指表格数据类型 */ @@ -1006,7 +1015,9 @@ export interface RowClassNameParams { type?: 'body' | 'foot'; } -export type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan; +export type TableRowspanAndColspanFunc = ( + params: BaseTableCellParams, +) => RowspanColspan; export interface RowspanColspan { colspan?: number; @@ -1026,9 +1037,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; @@ -1054,9 +1065,10 @@ 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'; } @@ -1190,9 +1202,7 @@ export interface PrimaryTableCellParams { } export type CheckProps = - | CheckboxProps - | RadioProps - | ((options: { row: T; rowIndex: number }) => CheckboxProps | RadioProps); + CheckboxProps | RadioProps | ((options: { row: T; rowIndex: number }) => CheckboxProps | RadioProps); export interface PrimaryTableRenderParams extends PrimaryTableCellParams { type: RenderType; @@ -1245,8 +1255,7 @@ export interface TableColumnGroup { export type PrimaryTableOnEditedContext = PrimaryTableCellParams & { trigger: string; newRowData: T }; export type TableEditableCellProps = - | TablePlainObject - | ((params: TableEditableCellPropsParams) => TablePlainObject); + TablePlainObject | ((params: TableEditableCellPropsParams) => TablePlainObject); export interface TableEditableCellPropsParams extends PrimaryTableCellParams { editedRow: T; diff --git a/packages/products/tdesign-vue/src/t-scroll/type.ts b/packages/products/tdesign-vue/src/t-scroll/type.ts index 937b6fde0..a337b8065 100644 --- a/packages/products/tdesign-vue/src/t-scroll/type.ts +++ b/packages/products/tdesign-vue/src/t-scroll/type.ts @@ -4,7 +4,7 @@ * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC * */ -import { TScroll } from '../common'; +import type { TScroll } from '../common'; export interface TScroll { /** diff --git a/packages/products/tdesign-vue/src/table/base-table-props.ts b/packages/products/tdesign-vue/src/table/base-table-props.ts index ce78878d3..7a1ebb994 100644 --- a/packages/products/tdesign-vue/src/table/base-table-props.ts +++ b/packages/products/tdesign-vue/src/table/base-table-props.ts @@ -59,6 +59,8 @@ export default { type: [String, Function] as PropType, default: '', }, + /** 切换分页时是否锁定滚动条。开启后,切换分页时不会重置滚动条位置。 */ + enableLockScrollbar: Boolean, /** 首行内容,横跨所有列 */ firstFullRow: { type: [String, Function] as PropType, diff --git a/packages/products/tdesign-vue/src/table/table.en-US.md b/packages/products/tdesign-vue/src/table/table.en-US.md index 9585602a7..8be5691cc 100644 --- a/packages/products/tdesign-vue/src/table/table.en-US.md +++ b/packages/products/tdesign-vue/src/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/blob/develop/src/common.ts) | N +enableLockScrollbar | Boolean | false | \- | N firstFullRow | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/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/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/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/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/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/tree/develop/src/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/tree/develop/src/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/blob/develop/src/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/tree/develop/src/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/tree/develop/src/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/tree/develop/src/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/tree/develop/src/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/tree/develop/src/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/tree/develop/src/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/tree/develop/src/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/tree/develop/src/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/tree/develop/src/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/tree/develop/src/table/type.ts)。
`interface RowEventContext { row: T; index: number; e: MouseEvent \| KeyboardEvent }`
@@ -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/tree/develop/src/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/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/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/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/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/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/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/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N diff --git a/packages/products/tdesign-vue/src/table/table.md b/packages/products/tdesign-vue/src/table/table.md index cfee24763..37ec0771f 100644 --- a/packages/products/tdesign-vue/src/table/table.md +++ b/packages/products/tdesign-vue/src/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/blob/develop/src/common.ts) | N +enableLockScrollbar | Boolean | false | 切换分页时是否锁定滚动条。开启后,切换分页时不会重置滚动条位置。 | N firstFullRow | String / Slot / Function | - | 首行内容,横跨所有列。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N fixedRows | Array | - | 固定行(冻结行),示例:[M, N],表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时,表示不冻结行。TS 类型:`Array` | N footData | Array | [] | 表尾数据源,泛型 T 指表格数据类型。TS 类型:`Array` | N @@ -43,7 +44,7 @@ resizable | Boolean | false | 是否允许调整列宽,设置 `tableLayout=fix 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/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/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/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/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/tree/develop/src/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/tree/develop/src/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/blob/develop/src/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/tree/develop/src/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/tree/develop/src/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/tree/develop/src/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/tree/develop/src/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/tree/develop/src/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/tree/develop/src/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/tree/develop/src/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/tree/develop/src/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/tree/develop/src/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/tree/develop/src/table/type.ts)。
`interface RowEventContext { row: T; index: number; e: MouseEvent \| KeyboardEvent }`
@@ -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/tree/develop/src/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/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/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/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/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/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/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/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N diff --git a/packages/products/tdesign-vue/src/table/type.ts b/packages/products/tdesign-vue/src/table/type.ts index f0c005070..6c6910a75 100644 --- a/packages/products/tdesign-vue/src/table/type.ts +++ b/packages/products/tdesign-vue/src/table/type.ts @@ -18,7 +18,7 @@ import { ButtonProps } from '../button'; import { CheckboxGroupProps } from '../checkbox'; import { DialogProps } from '../dialog'; import { FormRule, AllValidateResult } from '../form'; -import { +import type { TNode, OptionData, SizeEnum, @@ -88,6 +88,11 @@ export interface TdBaseTableProps { * @default '' */ empty?: string | TNode; + /** + * 切换分页时是否锁定滚动条。开启后,切换分页时不会重置滚动条位置。 + * @default false + */ + enableLockScrollbar?: boolean; /** * 首行内容,横跨所有列 */ @@ -391,8 +396,10 @@ export interface BaseTableCol { width?: string | number; } -export interface TdPrimaryTableProps - extends Omit, 'columns' | 'onCellClick'> { +export interface TdPrimaryTableProps extends Omit< + TdBaseTableProps, + 'columns' | 'onCellClick' +> { /** * 异步加载状态。值为 `loading` 显示默认文字 “正在加载中,请稍后”,值为 `load-more` 显示“点击加载更多”,值为其他,表示完全自定义异步加载区域内容 */ @@ -616,8 +623,10 @@ export interface PrimaryTableInstanceFunctions Promise<{ result: TableErrorListMap }>; } -export interface PrimaryTableCol - extends Omit { +export interface PrimaryTableCol extends Omit< + BaseTableCol, + 'cell' | 'title' | 'render' | 'children' +> { /** * 自定义单元格渲染。值类型为 Function 表示以函数形式渲染单元格。值类型为 string 表示使用插槽渲染,插槽名称为 cell 的值。默认使用 colKey 作为插槽名称。优先级高于 render。泛型 T 指表格数据类型 */ @@ -1006,7 +1015,9 @@ export interface RowClassNameParams { type?: 'body' | 'foot'; } -export type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan; +export type TableRowspanAndColspanFunc = ( + params: BaseTableCellParams, +) => RowspanColspan; export interface RowspanColspan { colspan?: number; @@ -1026,9 +1037,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; @@ -1054,9 +1065,10 @@ 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'; } @@ -1190,9 +1202,7 @@ export interface PrimaryTableCellParams { } export type CheckProps = - | CheckboxProps - | RadioProps - | ((options: { row: T; rowIndex: number }) => CheckboxProps | RadioProps); + CheckboxProps | RadioProps | ((options: { row: T; rowIndex: number }) => CheckboxProps | RadioProps); export interface PrimaryTableRenderParams extends PrimaryTableCellParams { type: RenderType; @@ -1245,8 +1255,7 @@ export interface TableColumnGroup { export type PrimaryTableOnEditedContext = PrimaryTableCellParams & { trigger: string; newRowData: T }; export type TableEditableCellProps = - | TablePlainObject - | ((params: TableEditableCellPropsParams) => TablePlainObject); + TablePlainObject | ((params: TableEditableCellPropsParams) => TablePlainObject); export interface TableEditableCellPropsParams extends PrimaryTableCellParams { editedRow: T; diff --git a/packages/scripts/api.json b/packages/scripts/api.json index bbec1ee27..4ce5eae0a 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -10640,6 +10640,45 @@ "TNode" ] }, + { + "id": 1784622210, + "platform_framework": [ + "1", + "2" + ], + "component": "BaseTable", + "field_category": 1, + "field_name": "enableLockScrollbar", + "field_type": [ + "4" + ], + "field_default_value": "false", + "field_enum": "", + "field_desc_zh": "切换分页时是否锁定滚动条。开启后,切换分页时不会重置滚动条位置。", + "field_desc_en": null, + "field_required": 0, + "event_input": "", + "create_time": "2026-07-21 08:23:30", + "update_time": "2026-07-21 08:23:30", + "event_output": null, + "custom_field_type": null, + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Props", + "platform_framework_text": [ + "Vue(PC)", + "React(PC)" + ], + "field_type_text": [ + "Boolean" + ] + }, { "id": 2054, "platform_framework": [