mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 18:09:22 +08:00
99 lines
2.2 KiB
Markdown
99 lines
2.2 KiB
Markdown
---
|
|
order: 4
|
|
title:
|
|
en-US: Custom selection
|
|
zh-CN: 自定义选择项
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
通过 `rowSelection.selections` 自定义选择项,默认不显示下拉选项,设为 `true` 时显示默认选择项。
|
|
|
|
## en-US
|
|
|
|
Use `rowSelection.selections` custom selections, default no select dropdown, show default selections via setting to `true`.
|
|
|
|
```jsx
|
|
import { Table } from 'antd';
|
|
|
|
const columns = [
|
|
{
|
|
title: 'Name',
|
|
dataIndex: 'name',
|
|
},
|
|
{
|
|
title: 'Age',
|
|
dataIndex: 'age',
|
|
},
|
|
{
|
|
title: 'Address',
|
|
dataIndex: 'address',
|
|
},
|
|
];
|
|
|
|
const data = [];
|
|
for (let i = 0; i < 46; i++) {
|
|
data.push({
|
|
key: i,
|
|
name: `Edward King ${i}`,
|
|
age: 32,
|
|
address: `London, Park Lane no. ${i}`,
|
|
});
|
|
}
|
|
|
|
class App extends React.Component {
|
|
state = {
|
|
selectedRowKeys: [], // Check here to configure the default column
|
|
};
|
|
|
|
onSelectChange = selectedRowKeys => {
|
|
console.log('selectedRowKeys changed: ', selectedRowKeys);
|
|
this.setState({ selectedRowKeys });
|
|
};
|
|
|
|
render() {
|
|
const { selectedRowKeys } = this.state;
|
|
const rowSelection = {
|
|
selectedRowKeys,
|
|
onChange: this.onSelectChange,
|
|
selections: [
|
|
Table.SELECTION_ALL,
|
|
Table.SELECTION_INVERT,
|
|
Table.SELECTION_NONE,
|
|
{
|
|
key: 'odd',
|
|
text: 'Select Odd Row',
|
|
onSelect: changableRowKeys => {
|
|
let newSelectedRowKeys = [];
|
|
newSelectedRowKeys = changableRowKeys.filter((key, index) => {
|
|
if (index % 2 !== 0) {
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
this.setState({ selectedRowKeys: newSelectedRowKeys });
|
|
},
|
|
},
|
|
{
|
|
key: 'even',
|
|
text: 'Select Even Row',
|
|
onSelect: changableRowKeys => {
|
|
let newSelectedRowKeys = [];
|
|
newSelectedRowKeys = changableRowKeys.filter((key, index) => {
|
|
if (index % 2 !== 0) {
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
this.setState({ selectedRowKeys: newSelectedRowKeys });
|
|
},
|
|
},
|
|
],
|
|
};
|
|
return <Table rowSelection={rowSelection} columns={columns} dataSource={data} />;
|
|
}
|
|
}
|
|
|
|
ReactDOM.render(<App />, mountNode);
|
|
```
|