Table 表格 - 选择功能
Table 组件支持单选和多选功能。
多选
配置 selection-config 的 type 为 checkbox 启用多选功能。
日期 | 姓名 | 地址 |
|---|
2024-01-01 | 张三 | 北京市朝阳区 | |
2024-01-02 | 李四 | 上海市浦东新区 | |
2024-01-03 | 王五 | 广州市天河区 | |
2024-01-04 | 赵六 | 深圳市南山区 | |
2024-01-05 | 钱七 | 杭州市西湖区 |
已选择: 无
多选
单选
配置 selection-config 的 type 为 radio 启用单选功能。
日期 | 姓名 | 地址 |
|---|
2024-01-01 | 张三 | 北京市朝阳区 | |
2024-01-02 | 李四 | 上海市浦东新区 | |
2024-01-03 | 王五 | 广州市天河区 | |
2024-01-04 | 赵六 | 深圳市南山区 | |
2024-01-05 | 钱七 | 杭州市西湖区 |
当前选中: 无
单选
禁用选择
通过 selection-config.checkable 函数控制某行能否被选中。
日期 | 姓名 | 地址 |
|---|
2024-01-01 | 张三 | 北京市朝阳区 | |
2024-01-02 | 李四 | 上海市浦东新区 | |
2024-01-03 | 王五 | 广州市天河区 | |
2024-01-04 | 赵六 | 深圳市南山区 | |
2024-01-05 | 钱七 | 杭州市西湖区 |
第2行和第4行被禁用选择
禁用选择
跨页保留选择
设置 selection-config.reserve 为 true 可在切换分页时保留选择状态。
日期 | 姓名 | 地址 |
|---|
2024-01-01 | 张三 | 北京市朝阳区 | |
2024-01-02 | 李四 | 上海市浦东新区 | |
2024-01-03 | 王五 | 广州市天河区 | |
2024-01-04 | 赵六 | 深圳市南山区 | |
2024-01-05 | 钱七 | 杭州市西湖区 |
配合分页使用时，切换页面后选择状态会保留
跨页保留选择
实战：跨页勾选与回显
结合分页组件请求在线接口 JSONPlaceholder，演示真实场景下的跨页勾选和已选回显功能。
ID | 标题 | 用户ID |
|---|
暂无数据
正在加载...
实战：跨页勾选与回显
实战：分页初始化回显
模拟编辑场景——页面加载时从后端获取之前已保存的勾选数据，通过 selectedRowKeys 自动回显勾选状态。切换到对应页码时，属于该页的行会自动打勾；同时支持继续勾选/取消操作。
核心思路：将后端返回的已选数据写入
Map，提取keys传给selectedRowKeys，表格会自动将匹配的行标记为选中。
ID | 标题 | 用户ID |
|---|
暂无数据
正在加载...
已选 5 项（含跨页数据）
#3 ea molestias qu... #7 magnam facilis ... #15 eveniet quod te... #22 dolor sint quo ... #38 explicabo et eo...
实战：分页初始化回显