From c7b7f1c4dcd7677230c6bd69071858fd4e583566 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Mon, 18 Dec 2023 15:26:45 +0800 Subject: [PATCH] docs: add one more demo for row selection (#1682) Co-authored-by: sheepluo --- docs/web/api/table.en-US.md | 10 ++++++++-- docs/web/api/table.md | 10 ++++++++-- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/docs/web/api/table.en-US.md b/docs/web/api/table.en-US.md index 4269974063..cc161bc4be 100644 --- a/docs/web/api/table.en-US.md +++ b/docs/web/api/table.en-US.md @@ -210,7 +210,7 @@ In scenarios involving form selection or batch operations, you can directly sele In scenarios involving form selection or batch operations, you can directly select or deselect operation objects in front of data rows. -#### Single selection +#### ExampleA: Single selection - `selectedRowKeys` represents an array of unique identifiers for the currently selected rows and supports the non-controlled attribute `defaultSelectedRowKeys`. - `onSelectChange` is triggered when the selected row changes. @@ -218,7 +218,7 @@ In scenarios involving form selection or batch operations, you can directly sele {{ select-single }} -#### Multiple selection +#### ExampleB: Multiple selection - `selectedRowKeys` represents an array of unique identifiers for the currently selected rows and supports the non-controlled attribute `defaultSelectedRowKeys`. - `onSelectChange` is triggered when the selected row changes. @@ -228,6 +228,12 @@ In scenarios involving form selection or batch operations, you can directly sele {{ select-multiple }} +#### ExampleC: Row Selection Without Handler + +A table with row selection without an action column is generally used in some brief selection scenarios, where selection is made directly by clicking on the row. you can use `rowSelectionType: 'single' | 'multiple'` to set row selection type. + +{{ select-without-handler }} + ### Paginated table #### Remote data pagination diff --git a/docs/web/api/table.md b/docs/web/api/table.md index 51ffa80978..73d170a5f1 100644 --- a/docs/web/api/table.md +++ b/docs/web/api/table.md @@ -202,7 +202,7 @@ spline: data 在涉及到表单选择、或批量操作场景中,可在数据行前直接单选或多选操作对象。 -#### 单选 +#### 示例一:单选(Radio) - `selectedRowKeys` 表示当前选中行的唯一标识数组,支持非受控属性 `defaultSelectedRowKeys` - `onSelectChange` 会在选中行发生变化时触发 @@ -210,7 +210,7 @@ spline: data {{ select-single }} -#### 多选 +#### 示例二:多选(Checkbox) - `selectedRowKeys` 表示当前选中行的唯一标识数组,支持非受控属性 `defaultSelectedRowKeys` - `onSelectChange` 会在选中行发生变化时触发 @@ -220,6 +220,12 @@ spline: data {{ select-multiple }} +#### 示例三:没有操作列的行选中 + +不带操作列的行选中表格,一般用于一些简要选择场景,通过点击行直接选中。可以通过 `rowSelectionType: 'single' | 'multiple'` 控制单选或多选。 + +{{ select-without-handler }} + ### 可分页的表格 #### 远程数据分页