Table - Selection
The Table component supports single and multiple selection.
Multiple Selection
Configure selection-config type as checkbox to enable multiple selection.
Date | Name | Address |
|---|
2024-01-01 | John | Chaoyang, Beijing | |
2024-01-02 | Jane | Pudong, Shanghai | |
2024-01-03 | Mike | Tianhe, Guangzhou | |
2024-01-04 | Sarah | Nanshan, Shenzhen | |
2024-01-05 | Tom W. | Xihu, Hangzhou |
Single Selection
Configure selection-config type as radio to enable single selection.
Date | Name | Address |
|---|
2024-01-01 | John | Chaoyang, Beijing | |
2024-01-02 | Jane | Pudong, Shanghai | |
2024-01-03 | Mike | Tianhe, Guangzhou | |
2024-01-04 | Sarah | Nanshan, Shenzhen | |
2024-01-05 | Tom W. | Xihu, Hangzhou |
Disabled Selection
Use selection-config.checkable function to control whether a row can be selected.
Date | Name | Address |
|---|
2024-01-01 | John | Chaoyang, Beijing | |
2024-01-02 | Jane | Pudong, Shanghai | |
2024-01-03 | Mike | Tianhe, Guangzhou | |
2024-01-04 | Sarah | Nanshan, Shenzhen | |
2024-01-05 | Tom W. | Xihu, Hangzhou |
Rows 2 and 4 are disabled from selection
Cross-Page Selection
Set selection-config.reserve to true to preserve selection state when switching pages.
Date | Name | Address |
|---|
2024-01-01 | John | Chaoyang, Beijing | |
2024-01-02 | Jane | Pudong, Shanghai | |
2024-01-03 | Mike | Tianhe, Guangzhou | |
2024-01-04 | Sarah | Nanshan, Shenzhen | |
2024-01-05 | Tom W. | Xihu, Hangzhou |
When using with pagination, selection state is preserved after page change
Practical: Cross-Page Selection & Echo
Combine with pagination component to request online API JSONPlaceholder, demonstrating cross-page selection and selected data echo in real scenarios.
ID | Title | User ID |
|---|
Practical: Pagination Init Echo
Simulate editing scenario - get previously saved selection data from backend when page loads, automatically echo selection state via selectedRowKeys. When switching to the corresponding page, rows belonging to that page will be automatically checked; also supports continue checking/unchecking operations.
Core Principle: Write backend returned selected data to
Map, extractkeysand pass toselectedRowKeys, the table will automatically mark matching rows as selected.
ID | Title | User ID |
|---|