Skip to content

feat: support scroll-to-bottom #2169

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
novlan1 wants to merge 8 commits into
base: develop
Choose a base branch
from
Open

feat: support scroll-to-bottom #2169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2ffe4c2
feat: support scroll-to-bottom
novlan1 Mar 11, 2026
85aea4b
chore: update snapshot
novlan1 Mar 11, 2026
58efc2a
chore: resolve conflict
novlan1 Mar 25, 2026
05c3030
chore: regenerate api
novlan1 Mar 25, 2026
fe9a75c
chore: update snapshot
github-actions[bot] Mar 25, 2026
30d785f
feat(table): footer => footerSummary & delete scrollBottomThreshold
novlan1 Mar 26, 2026
8d2e30c
chore: merge develop
github-actions[bot] Mar 26, 2026
1b3ca50
chore: update snapshot
github-actions[bot] Mar 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/_common
Open in desktop
Submodule _common updated 3 files
+0 −4 docs/mobile/api/cascader.en-US.md
+0 −4 docs/mobile/api/cascader.md
+4 −4 style/mobile/components/tabs/_index.less
2 changes: 2 additions & 0 deletions src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -478,6 +478,7 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
</table>
<!---->
</div>
<!---->
</div>


Expand Down Expand Up @@ -7170,6 +7171,7 @@ exports[`ConfigProvider > ConfigProvider tableEnVue demo works fine 1`] = `
</table>
<!---->
</div>
<!---->
</div>


Expand Down
12 changes: 12 additions & 0 deletions src/table/__test__/__snapshots__/demo.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -547,6 +547,7 @@ exports[`Table > Table baseVue demo works fine 1`] = `
</table>
<!---->
</div>
<!---->
</div>
</div>
`;
Expand Down Expand Up @@ -1056,6 +1057,7 @@ exports[`Table > Table borderedVue demo works fine 1`] = `
</table>
<!---->
</div>
<!---->
</div>
</div>
`;
Expand Down Expand Up @@ -1505,6 +1507,7 @@ exports[`Table > Table customRowStyleVue demo works fine 1`] = `
</table>
<!---->
</div>
<!---->
</div>
</div>
`;
Expand Down Expand Up @@ -2090,6 +2093,7 @@ exports[`Table > Table mobileVue demo works fine 1`] = `
</table>
<!---->
</div>
<!---->
</div>
</div>

Expand Down Expand Up @@ -2358,6 +2362,7 @@ exports[`Table > Table mobileVue demo works fine 1`] = `
</table>
<!---->
</div>
<!---->
</div>
</div>

Expand Down Expand Up @@ -3481,6 +3486,7 @@ exports[`Table > Table mobileVue demo works fine 1`] = `
</table>
<!---->
</div>
<!---->
</div>
</div>

Expand Down Expand Up @@ -4007,6 +4013,7 @@ exports[`Table > Table mobileVue demo works fine 1`] = `
</table>
<!---->
</div>
<!---->
</div>
</div>

Expand Down Expand Up @@ -4473,6 +4480,7 @@ exports[`Table > Table mobileVue demo works fine 1`] = `
</table>
<!---->
</div>
<!---->
</div>
</div>

Expand Down Expand Up @@ -4696,6 +4704,7 @@ exports[`Table > Table mobileVue demo works fine 1`] = `
</table>
<!---->
</div>
<!---->
</div>

</div>
Expand Down Expand Up @@ -4905,6 +4914,7 @@ exports[`Table > Table rowspanColspanVue demo works fine 1`] = `
</table>
<!---->
</div>
<!---->
</div>
`;

Expand Down Expand Up @@ -5155,6 +5165,7 @@ exports[`Table > Table scrollVue demo works fine 1`] = `
</table>
<!---->
</div>
<!---->
</div>
</div>
`;
Expand Down Expand Up @@ -6261,6 +6272,7 @@ exports[`Table > Table stripeVue demo works fine 1`] = `
</table>
<!---->
</div>
<!---->
</div>
</div>
`;
6 changes: 6 additions & 0 deletions src/table/base-table-props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ export default {
fixedRows: {
type: Array as PropType<TdBaseTableProps['fixedRows']>,
},
/** 表尾总结行 */
footerSummary: {
type: [String, Function] as PropType<TdBaseTableProps['footerSummary']>,
},
/** 表格高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` */
height: {
type: [String, Number] as PropType<TdBaseTableProps['height']>,
Expand Down Expand Up @@ -104,4 +108,6 @@ export default {
onRowClick: Function as PropType<TdBaseTableProps['onRowClick']>,
/** 表格内容滚动时触发 */
onScroll: Function as PropType<TdBaseTableProps['onScroll']>,
/** 表格内容滚动到底部时触发，可用于实现滚动加载 */
onScrollToBottom: Function as PropType<TdBaseTableProps['onScrollToBottom']>,
};
10 changes: 9 additions & 1 deletion src/table/base-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const { prefix } = config;
export default defineComponent({
name: `${prefix}-base-table`,
props: baseTableProps,
emits: ['cell-click', 'row-click', 'scroll'],
emits: ['cell-click', 'row-click', 'scroll', 'scroll-to-bottom'],
setup(props, context) {
const tableRef = ref();
const theadRef = ref();
Expand Down Expand Up @@ -144,6 +144,12 @@ export default defineComponent({
const target = (e.target || e.srcElement) as HTMLElement;
updateColumnFixedShadow(target);
props.onScroll?.({ params: e });

// 滚动到底部检测
const threshold = 50;
if (target.scrollHeight - target.scrollTop - target.clientHeight <= threshold) {
props.onScrollToBottom?.();
}
};

const tdClassName = (td_item: BaseTableCol<TableRowData>, extra?: Array<ClassName>) => {
Expand Down Expand Up @@ -289,6 +295,7 @@ export default defineComponent({

return () => {
const renderLoading = renderTNodeJSX('loading', { defaultNode: defaultLoadingContent });
const renderFooter = renderTNodeJSX('footerSummary');

return (
<div ref={tableRef} class={dynamicBaseTableClasses.value} style="position: relative">
Expand Down Expand Up @@ -334,6 +341,7 @@ export default defineComponent({
</table>
{renderLoading && <div class={loadingClasses.value}>{renderLoading}</div>}
</div>
{renderFooter && <div class={tableBaseClass.bottomContent}>{renderFooter}</div>}
</div>
);
};
Expand Down
3 changes: 3 additions & 0 deletions src/table/table.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ columns | Array | [] | table column configs。Typescript: `Array<BaseTableCol<T>
data | Array | [] | table data。Typescript: `Array<T>` | N
empty | String / Slot / Function | '' | empty text or empty element。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
fixedRows | Array | - | `1.9.3`。Typescript: `Array<number>` | N
footerSummary | String / Slot / Function | - | footer summary content。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
height | String / Number | - | table height | N
loading | Boolean / Slot / Function | undefined | loading state table。Typescript: `boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
loadingProps | Object | - | Typescript: `Partial<LoadingProps>`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts) | N
Expand All @@ -28,6 +29,7 @@ verticalAlign | String | middle | vertical align。options: top/middle/bottom |
onCellClick | Function | | Typescript: `(context: BaseTableCellEventContext<T>) => void`<br/>trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts)。<br/>`interface BaseTableCellEventContext<T> { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`<br/> | N
onRowClick | Function | | Typescript: `(context: RowEventContext<T>) => void`<br/>trigger on row click。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts)。<br/>`interface RowEventContext<T> { row: T; index: number; e: MouseEvent }`<br/> | N
onScroll | Function | | Typescript: `(params: { e: Event }) => void`<br/>trigger on table content scroll | N
onScrollToBottom | Function | | Typescript: `() => void`<br/>Typescript: `Partial<AffixProps>` | N

### BaseTable Events

Expand All @@ -36,6 +38,7 @@ name | params | description
cell-click | `(context: BaseTableCellEventContext<T>)` | trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts)。<br/>`interface BaseTableCellEventContext<T> { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`<br/>
row-click | `(context: RowEventContext<T>)` | trigger on row click。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts)。<br/>`interface RowEventContext<T> { row: T; index: number; e: MouseEvent }`<br/>
scroll | `(params: { e: Event })` | trigger on table content scroll
scroll-to-bottom | \- | Typescript: `Partial<AffixProps>`

### BaseTableInstanceFunctions 组件实例方法

Expand Down
3 changes: 3 additions & 0 deletions src/table/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：
data | Array | [] | 数据源，泛型 T 指表格数据类型。TS 类型：`Array<T>` | N
empty | String / Slot / Function | '' | 空表格呈现样式，支持全局配置 `GlobalConfigProvider`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
fixedRows | Array | - | `1.9.3`。固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行。TS 类型：`Array<number>` | N
footerSummary | String / Slot / Function | - | 表尾总结行。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
height | String / Number | - | 表格高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` | N
loading | Boolean / Slot / Function | undefined | 加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
loadingProps | Object | - | 透传加载组件全部属性。TS 类型：`Partial<LoadingProps>`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts) | N
Expand All @@ -28,6 +29,7 @@ verticalAlign | String | middle | 行内容上下方向对齐。可选项：top/
onCellClick | Function | | TS 类型：`(context: BaseTableCellEventContext<T>) => void`<br/>单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts)。<br/>`interface BaseTableCellEventContext<T> { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`<br/> | N
onRowClick | Function | | TS 类型：`(context: RowEventContext<T>) => void`<br/>行点击时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts)。<br/>`interface RowEventContext<T> { row: T; index: number; e: MouseEvent }`<br/> | N
onScroll | Function | | TS 类型：`(params: { e: Event }) => void`<br/>表格内容滚动时触发 | N
onScrollToBottom | Function | | TS 类型：`() => void`<br/>表格内容滚动到底部时触发，可用于实现滚动加载。TS 类型：`Partial<AffixProps>` | N

### BaseTable Events

Expand All @@ -36,6 +38,7 @@ onScroll | Function | | TS 类型：`(params: { e: Event }) => void`<br/>表格
cell-click | `(context: BaseTableCellEventContext<T>)` | 单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts)。<br/>`interface BaseTableCellEventContext<T> { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`<br/>
row-click | `(context: RowEventContext<T>)` | 行点击时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts)。<br/>`interface RowEventContext<T> { row: T; index: number; e: MouseEvent }`<br/>
scroll | `(params: { e: Event })` | 表格内容滚动时触发
scroll-to-bottom | \- | 表格内容滚动到底部时触发，可用于实现滚动加载。TS 类型：`Partial<AffixProps>`

### BaseTableInstanceFunctions 组件实例方法

Expand Down
8 changes: 8 additions & 0 deletions src/table/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@ export interface TdBaseTableProps<T extends TableRowData = TableRowData> {
* 固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行
*/
fixedRows?: Array<number>;
/**
* 表尾总结行
*/
footerSummary?: string | TNode;
/**
* 表格高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight`
*/
Expand Down Expand Up @@ -106,6 +110,10 @@ export interface TdBaseTableProps<T extends TableRowData = TableRowData> {
* 表格内容滚动时触发
*/
onScroll?: (params: { e: Event }) => void;
/**
* 表格内容滚动到底部时触发，可用于实现滚动加载
*/
onScrollToBottom?: () => void;
}

/** 组件实例方法 */
Expand Down
Loading