mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
fix(Table): cannot check rows when checkStrictly={false} (#50746)
This commit is contained in:
Jerryxin
GitHub
parent
94ee36a40c
commit
13f338a9f5
@ -1690,6 +1690,127 @@ describe('Table.rowSelection', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('treeData cache with preserveSelectedRowKeys and checkStrictly false', () => {
|
||||
const onChange = jest.fn();
|
||||
const treeDataColumns = [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
];
|
||||
const { container, rerender } = render(
|
||||
<Table
|
||||
expandable={{
|
||||
defaultExpandAllRows: true,
|
||||
}}
|
||||
columns={treeDataColumns}
|
||||
dataSource={[
|
||||
{
|
||||
key: 1,
|
||||
name: 'a',
|
||||
children: [
|
||||
{
|
||||
key: 11,
|
||||
name: 'b',
|
||||
},
|
||||
{
|
||||
key: 12,
|
||||
name: 'c',
|
||||
children: [
|
||||
{
|
||||
key: 121,
|
||||
name: 'd',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
name: 'e',
|
||||
},
|
||||
]}
|
||||
rowSelection={{ onChange, preserveSelectedRowKeys: true, checkStrictly: false }}
|
||||
/>,
|
||||
);
|
||||
|
||||
fireEvent.click(container.querySelector('th input')!);
|
||||
expect(onChange).toHaveBeenCalledWith(
|
||||
[1, 11, 12, 121, 2],
|
||||
[
|
||||
{
|
||||
key: 1,
|
||||
name: 'a',
|
||||
children: [
|
||||
{
|
||||
key: 11,
|
||||
name: 'b',
|
||||
},
|
||||
{
|
||||
key: 12,
|
||||
name: 'c',
|
||||
children: [
|
||||
{
|
||||
key: 121,
|
||||
name: 'd',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{ key: 11, name: 'b' },
|
||||
{ key: 12, name: 'c', children: [{ key: 121, name: 'd' }] },
|
||||
{ key: 121, name: 'd' },
|
||||
{ key: 2, name: 'e' },
|
||||
],
|
||||
{ type: 'all' },
|
||||
);
|
||||
|
||||
rerender(
|
||||
<Table
|
||||
expandable={{
|
||||
defaultExpandAllRows: true,
|
||||
}}
|
||||
columns={treeDataColumns}
|
||||
dataSource={[
|
||||
{
|
||||
key: 1,
|
||||
name: 'a',
|
||||
children: [
|
||||
{
|
||||
key: 11,
|
||||
name: 'b',
|
||||
},
|
||||
{
|
||||
key: 12,
|
||||
name: 'c',
|
||||
children: [
|
||||
{
|
||||
key: 121,
|
||||
name: 'd',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
rowSelection={{ onChange, preserveSelectedRowKeys: true, checkStrictly: false }}
|
||||
/>,
|
||||
);
|
||||
fireEvent.click(container.querySelectorAll('tbody input[type="checkbox"]')[1]);
|
||||
expect(onChange).toHaveBeenCalledWith(
|
||||
[12, 121, 2],
|
||||
[
|
||||
{ key: 12, name: 'c', children: [{ key: 121, name: 'd' }] },
|
||||
{ key: 121, name: 'd' },
|
||||
{ key: 2, name: 'e' },
|
||||
],
|
||||
{ type: 'single' },
|
||||
);
|
||||
expect(getIndeterminateSelection(container)).toEqual([1]);
|
||||
});
|
||||
|
||||
it('works with receive selectedRowKeys from [] to undefined', () => {
|
||||
const onChange = jest.fn();
|
||||
const dataSource = [{ name: 'Jack' }];
|
||||
|
||||
@ -32985,3 +32985,516 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders components/table/demo/tree-table-ellipsis.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/table/demo/tree-table-preserveSelectedRowKeys.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="margin-bottom: 16px;"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
CheckStrictly:
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
aria-checked="false"
|
||||
class="ant-switch"
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-switch-inner-checked"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner-unchecked"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
preserveSelectedRowKeys:
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
aria-checked="true"
|
||||
class="ant-switch ant-switch-checked"
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-switch-inner-checked"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner-unchecked"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table"
|
||||
>
|
||||
<div
|
||||
class="ant-table-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
>
|
||||
<table
|
||||
style="table-layout: auto;"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
class="ant-table-selection-col"
|
||||
/>
|
||||
<col />
|
||||
<col
|
||||
style="width: 12%;"
|
||||
/>
|
||||
<col
|
||||
style="width: 30%;"
|
||||
/>
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-cell ant-table-selection-column"
|
||||
scope="col"
|
||||
>
|
||||
<div
|
||||
class="ant-table-selection"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-wave-target"
|
||||
>
|
||||
<input
|
||||
aria-label="Select all"
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Age
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Address
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="key0"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-with-append"
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left: 0px;"
|
||||
/>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-label="Expand row"
|
||||
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
|
||||
type="button"
|
||||
/>
|
||||
Edward 0
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
London Park no. 0
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="key1"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-with-append"
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left: 0px;"
|
||||
/>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-label="Expand row"
|
||||
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
|
||||
type="button"
|
||||
/>
|
||||
Edward 1
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
London Park no. 1
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="key2"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-with-append"
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left: 0px;"
|
||||
/>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-label="Expand row"
|
||||
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
|
||||
type="button"
|
||||
/>
|
||||
Edward 2
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
London Park no. 2
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="key3"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-with-append"
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left: 0px;"
|
||||
/>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-label="Expand row"
|
||||
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
|
||||
type="button"
|
||||
/>
|
||||
Edward 3
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
London Park no. 3
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="key4"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-with-append"
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left: 0px;"
|
||||
/>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-label="Expand row"
|
||||
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
|
||||
type="button"
|
||||
/>
|
||||
Edward 4
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
London Park no. 4
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-prev ant-pagination-disabled"
|
||||
title="Previous Page"
|
||||
>
|
||||
<button
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="left"
|
||||
class="anticon anticon-left"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-2"
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-3"
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-disabled="false"
|
||||
class="ant-pagination-next"
|
||||
tabindex="0"
|
||||
title="Next Page"
|
||||
>
|
||||
<button
|
||||
class="ant-pagination-item-link"
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/table/demo/tree-table-preserveSelectedRowKeys.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
@ -28118,3 +28118,514 @@ Array [
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/table/demo/tree-table-preserveSelectedRowKeys.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="margin-bottom:16px"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
CheckStrictly:
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
aria-checked="false"
|
||||
class="ant-switch"
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-switch-inner-checked"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner-unchecked"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
preserveSelectedRowKeys:
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
aria-checked="true"
|
||||
class="ant-switch ant-switch-checked"
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-switch-inner-checked"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner-unchecked"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table"
|
||||
>
|
||||
<div
|
||||
class="ant-table-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
>
|
||||
<table
|
||||
style="table-layout:auto"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
class="ant-table-selection-col"
|
||||
/>
|
||||
<col />
|
||||
<col
|
||||
style="width:12%"
|
||||
/>
|
||||
<col
|
||||
style="width:30%"
|
||||
/>
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-cell ant-table-selection-column"
|
||||
scope="col"
|
||||
>
|
||||
<div
|
||||
class="ant-table-selection"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-wave-target"
|
||||
>
|
||||
<input
|
||||
aria-label="Select all"
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Age
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Address
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="key0"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-with-append"
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-label="Expand row"
|
||||
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
|
||||
type="button"
|
||||
/>
|
||||
Edward 0
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
London Park no. 0
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="key1"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-with-append"
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-label="Expand row"
|
||||
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
|
||||
type="button"
|
||||
/>
|
||||
Edward 1
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
London Park no. 1
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="key2"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-with-append"
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-label="Expand row"
|
||||
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
|
||||
type="button"
|
||||
/>
|
||||
Edward 2
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
London Park no. 2
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="key3"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-with-append"
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-label="Expand row"
|
||||
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
|
||||
type="button"
|
||||
/>
|
||||
Edward 3
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
London Park no. 3
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="key4"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-with-append"
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-label="Expand row"
|
||||
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
|
||||
type="button"
|
||||
/>
|
||||
Edward 4
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
London Park no. 4
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-prev ant-pagination-disabled"
|
||||
title="Previous Page"
|
||||
>
|
||||
<button
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="left"
|
||||
class="anticon anticon-left"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-2"
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-3"
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-disabled="false"
|
||||
class="ant-pagination-next"
|
||||
tabindex="0"
|
||||
title="Next Page"
|
||||
>
|
||||
<button
|
||||
class="ant-pagination-item-link"
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
11
components/table/demo/tree-table-preserveSelectedRowKeys.md
Normal file
11
components/table/demo/tree-table-preserveSelectedRowKeys.md
Normal file
@ -0,0 +1,11 @@
|
||||
## zh-CN
|
||||
|
||||
treeData Table 使用 CheckStrictly: false & preserveSelectedRowKeys: true 的示例
|
||||
|
||||
https://github.com/ant-design/ant-design/issues/50621
|
||||
|
||||
## en-US
|
||||
|
||||
treeData Table using CheckStrictly: false & preserveSelectedRowKeys: true example
|
||||
|
||||
https://github.com/ant-design/ant-design/issues/50621
|
||||
93
components/table/demo/tree-table-preserveSelectedRowKeys.tsx
Normal file
93
components/table/demo/tree-table-preserveSelectedRowKeys.tsx
Normal file
@ -0,0 +1,93 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Space, Switch, Table } from 'antd';
|
||||
import type { TableColumnsType, TableProps } from 'antd';
|
||||
|
||||
type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
|
||||
|
||||
interface DataType {
|
||||
key: React.ReactNode;
|
||||
name: string;
|
||||
age: number;
|
||||
address: string;
|
||||
children?: DataType[];
|
||||
}
|
||||
|
||||
const columns: TableColumnsType<DataType> = [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
width: '12%',
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
width: '30%',
|
||||
key: 'address',
|
||||
},
|
||||
];
|
||||
|
||||
const data: DataType[] = [];
|
||||
for (let i = 0; i < 15; i++) {
|
||||
data.push({
|
||||
key: `key${i}`,
|
||||
name: `Edward ${i}`,
|
||||
age: 32,
|
||||
address: `London Park no. ${i}`,
|
||||
children: [
|
||||
{
|
||||
key: `subKey${i}1`,
|
||||
name: 'Brown',
|
||||
age: 16,
|
||||
address: 'New York No. 3 Lake Park',
|
||||
},
|
||||
{
|
||||
key: `subKey${i}2`,
|
||||
name: 'Jimmy',
|
||||
age: 16,
|
||||
address: 'New York No. 3 Lake Park',
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
// rowSelection objects indicates the need for row selection
|
||||
const rowSelection: TableRowSelection<DataType> = {
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||||
},
|
||||
onSelect: (record, selected, selectedRows) => {
|
||||
console.log(record, selected, selectedRows);
|
||||
},
|
||||
onSelectAll: (selected, selectedRows, changeRows) => {
|
||||
console.log(selected, selectedRows, changeRows);
|
||||
},
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [checkStrictly, setCheckStrictly] = useState(false);
|
||||
const [preserveSelectedRowKeys, setPreserveSelectedRowKeys] = useState(true);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Space align="center" style={{ marginBottom: 16 }}>
|
||||
CheckStrictly: <Switch checked={checkStrictly} onChange={setCheckStrictly} />
|
||||
preserveSelectedRowKeys:{' '}
|
||||
<Switch checked={preserveSelectedRowKeys} onChange={setPreserveSelectedRowKeys} />
|
||||
</Space>
|
||||
<Table
|
||||
columns={columns}
|
||||
rowSelection={{ ...rowSelection, checkStrictly, preserveSelectedRowKeys }}
|
||||
dataSource={data}
|
||||
pagination={{ defaultPageSize: 5 }}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -152,13 +152,20 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
|
||||
updatePreserveRecordsCache(mergedSelectedKeys);
|
||||
}, [mergedSelectedKeys]);
|
||||
|
||||
// Get flatten data
|
||||
const flattedData = useMemo(
|
||||
() => flattenData(childrenColumnName, pageData),
|
||||
[childrenColumnName, pageData],
|
||||
);
|
||||
|
||||
const { keyEntities } = useMemo(() => {
|
||||
if (checkStrictly) {
|
||||
return { keyEntities: null };
|
||||
}
|
||||
let convertData = data;
|
||||
if (preserveSelectedRowKeys) {
|
||||
const keysSet = new Set(data.map((record, index) => getRowKey(record, index)));
|
||||
// use flattedData keys
|
||||
const keysSet = new Set(flattedData.map((record, index) => getRowKey(record, index)));
|
||||
// remove preserveRecords that duplicate data
|
||||
const preserveRecords = Array.from(preserveRecordsRef.current).reduce(
|
||||
(total: RecordType[], [key, value]) => (keysSet.has(key) ? total : total.concat(value)),
|
||||
@ -170,13 +177,7 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
|
||||
externalGetKey: getRowKey as any,
|
||||
childrenPropName: childrenColumnName,
|
||||
});
|
||||
}, [data, getRowKey, checkStrictly, childrenColumnName, preserveSelectedRowKeys]);
|
||||
|
||||
// Get flatten data
|
||||
const flattedData = useMemo(
|
||||
() => flattenData(childrenColumnName, pageData),
|
||||
[childrenColumnName, pageData],
|
||||
);
|
||||
}, [data, getRowKey, checkStrictly, childrenColumnName, preserveSelectedRowKeys, flattedData]);
|
||||
|
||||
// Get all checkbox props
|
||||
const checkboxPropsMap = useMemo(() => {
|
||||
|
||||
@ -84,6 +84,7 @@ const columns = [
|
||||
<code src="./demo/colspan-rowspan.tsx">表格行/列合并</code>
|
||||
<code src="./demo/tree-data.tsx">树形数据展示</code>
|
||||
<code src="./demo/tree-table-ellipsis.tsx" debug>树形数据省略情况测试</code>
|
||||
<code src="./demo/tree-table-preserveSelectedRowKeys.tsx" debug>树形数据保留key测试</code>
|
||||
<code src="./demo/fixed-header.tsx">固定表头</code>
|
||||
<code src="./demo/fixed-columns.tsx">固定列</code>
|
||||
<code src="./demo/fixed-gapped-columns.tsx" version="5.14.0">堆叠固定列</code>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user