mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 01:29:11 +08:00
184 lines
4.5 KiB
Markdown
184 lines
4.5 KiB
Markdown
---
|
|
order: 5
|
|
title:
|
|
zh-CN: 表格穿梭框
|
|
en-US: Table Transfer
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
使用 Table 组件作为自定义渲染列表。
|
|
|
|
## en-US
|
|
|
|
Customize render list with Table component.
|
|
|
|
```tsx
|
|
import { Switch, Table, Tag, Transfer } from 'antd';
|
|
import type { ColumnsType, TableRowSelection } from 'antd/es/table/interface';
|
|
import type { TransferItem, TransferProps } from 'antd/es/transfer';
|
|
import difference from 'lodash/difference';
|
|
import React, { useState } from 'react';
|
|
|
|
interface RecordType {
|
|
key: string;
|
|
title: string;
|
|
description: string;
|
|
disabled: boolean;
|
|
tag: string;
|
|
}
|
|
|
|
interface DataType {
|
|
title: string;
|
|
tag: string;
|
|
description: string;
|
|
}
|
|
|
|
interface TableTransferProps extends TransferProps<TransferItem> {
|
|
dataSource: DataType[];
|
|
leftColumns: ColumnsType<DataType>;
|
|
rightColumns: ColumnsType<DataType>;
|
|
}
|
|
|
|
// Customize Table Transfer
|
|
const TableTransfer = ({ leftColumns, rightColumns, ...restProps }: TableTransferProps) => (
|
|
<Transfer {...restProps}>
|
|
{({
|
|
direction,
|
|
filteredItems,
|
|
onItemSelectAll,
|
|
onItemSelect,
|
|
selectedKeys: listSelectedKeys,
|
|
disabled: listDisabled,
|
|
}) => {
|
|
const columns = direction === 'left' ? leftColumns : rightColumns;
|
|
|
|
const rowSelection: TableRowSelection<TransferItem> = {
|
|
getCheckboxProps: item => ({ disabled: listDisabled || item.disabled }),
|
|
onSelectAll(selected, selectedRows) {
|
|
const treeSelectedKeys = selectedRows
|
|
.filter(item => !item.disabled)
|
|
.map(({ key }) => key);
|
|
const diffKeys = selected
|
|
? difference(treeSelectedKeys, listSelectedKeys)
|
|
: difference(listSelectedKeys, treeSelectedKeys);
|
|
onItemSelectAll(diffKeys as string[], selected);
|
|
},
|
|
onSelect({ key }, selected) {
|
|
onItemSelect(key as string, selected);
|
|
},
|
|
selectedRowKeys: listSelectedKeys,
|
|
};
|
|
|
|
return (
|
|
<Table
|
|
rowSelection={rowSelection}
|
|
columns={columns}
|
|
dataSource={filteredItems}
|
|
size="small"
|
|
style={{ pointerEvents: listDisabled ? 'none' : undefined }}
|
|
onRow={({ key, disabled: itemDisabled }) => ({
|
|
onClick: () => {
|
|
if (itemDisabled || listDisabled) return;
|
|
onItemSelect(key as string, !listSelectedKeys.includes(key as string));
|
|
},
|
|
})}
|
|
/>
|
|
);
|
|
}}
|
|
</Transfer>
|
|
);
|
|
|
|
const mockTags = ['cat', 'dog', 'bird'];
|
|
|
|
const mockData: RecordType[] = Array.from({ length: 20 }).map((_, i) => ({
|
|
key: i.toString(),
|
|
title: `content${i + 1}`,
|
|
description: `description of content${i + 1}`,
|
|
disabled: i % 4 === 0,
|
|
tag: mockTags[i % 3],
|
|
}));
|
|
|
|
const originTargetKeys = mockData.filter(item => Number(item.key) % 3 > 1).map(item => item.key);
|
|
|
|
const leftTableColumns: ColumnsType<DataType> = [
|
|
{
|
|
dataIndex: 'title',
|
|
title: 'Name',
|
|
},
|
|
{
|
|
dataIndex: 'tag',
|
|
title: 'Tag',
|
|
render: tag => <Tag>{tag}</Tag>,
|
|
},
|
|
{
|
|
dataIndex: 'description',
|
|
title: 'Description',
|
|
},
|
|
];
|
|
|
|
const rightTableColumns: ColumnsType<Pick<DataType, 'title'>> = [
|
|
{
|
|
dataIndex: 'title',
|
|
title: 'Name',
|
|
},
|
|
];
|
|
|
|
const App: React.FC = () => {
|
|
const [targetKeys, setTargetKeys] = useState<string[]>(originTargetKeys);
|
|
const [disabled, setDisabled] = useState(false);
|
|
const [showSearch, setShowSearch] = useState(false);
|
|
|
|
const onChange = (nextTargetKeys: string[]) => {
|
|
setTargetKeys(nextTargetKeys);
|
|
};
|
|
|
|
const triggerDisable = (checked: boolean) => {
|
|
setDisabled(checked);
|
|
};
|
|
|
|
const triggerShowSearch = (checked: boolean) => {
|
|
setShowSearch(checked);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<TableTransfer
|
|
dataSource={mockData}
|
|
targetKeys={targetKeys}
|
|
disabled={disabled}
|
|
showSearch={showSearch}
|
|
onChange={onChange}
|
|
filterOption={(inputValue, item) =>
|
|
item.title!.indexOf(inputValue) !== -1 || item.tag.indexOf(inputValue) !== -1
|
|
}
|
|
leftColumns={leftTableColumns}
|
|
rightColumns={rightTableColumns}
|
|
/>
|
|
<Switch
|
|
unCheckedChildren="disabled"
|
|
checkedChildren="disabled"
|
|
checked={disabled}
|
|
onChange={triggerDisable}
|
|
style={{ marginTop: 16 }}
|
|
/>
|
|
<Switch
|
|
unCheckedChildren="showSearch"
|
|
checkedChildren="showSearch"
|
|
checked={showSearch}
|
|
onChange={triggerShowSearch}
|
|
style={{ marginTop: 16 }}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
```
|
|
|
|
```css
|
|
#components-transfer-demo-table-transfer .ant-table td {
|
|
background: transparent;
|
|
}
|
|
```
|