2017-02-23 19:29:47 +08:00
|
|
|
---
|
|
|
|
order: 4
|
|
|
|
title:
|
|
|
|
en-US: Custom selection
|
|
|
|
zh-CN: 自定义选择项
|
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
2017-03-24 11:44:36 +08:00
|
|
|
通过 `rowSelection.selections` 自定义选择项,默认不显示下拉选项,设为 `true` 时显示默认选择项。
|
2017-02-23 19:29:47 +08:00
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
2017-03-24 11:44:36 +08:00
|
|
|
Use `rowSelection.selections` custom selections, default no select dropdown, show default selections via setting to `true`.
|
2017-02-23 19:29:47 +08:00
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
```jsx
|
2017-02-23 19:29:47 +08:00
|
|
|
import { Table } from 'antd';
|
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
const columns = [
|
|
|
|
{
|
|
|
|
title: 'Name',
|
|
|
|
dataIndex: 'name',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Age',
|
|
|
|
dataIndex: 'age',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Address',
|
|
|
|
dataIndex: 'address',
|
|
|
|
},
|
|
|
|
];
|
2017-02-23 19:29:47 +08:00
|
|
|
|
|
|
|
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 = {
|
2017-10-09 13:23:20 +08:00
|
|
|
selectedRowKeys: [], // Check here to configure the default column
|
2017-02-23 19:29:47 +08:00
|
|
|
};
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
onSelectChange = selectedRowKeys => {
|
2017-02-23 19:29:47 +08:00
|
|
|
console.log('selectedRowKeys changed: ', selectedRowKeys);
|
|
|
|
this.setState({ selectedRowKeys });
|
2019-05-07 14:57:32 +08:00
|
|
|
};
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2017-02-23 19:29:47 +08:00
|
|
|
render() {
|
|
|
|
const { selectedRowKeys } = this.state;
|
|
|
|
const rowSelection = {
|
|
|
|
selectedRowKeys,
|
|
|
|
onChange: this.onSelectChange,
|
2017-08-27 15:44:22 +08:00
|
|
|
hideDefaultSelections: true,
|
2019-05-07 14:57:32 +08:00
|
|
|
selections: [
|
|
|
|
{
|
|
|
|
key: 'all-data',
|
|
|
|
text: 'Select All Data',
|
|
|
|
onSelect: () => {
|
|
|
|
this.setState({
|
|
|
|
selectedRowKeys: [...Array(46).keys()], // 0...45
|
|
|
|
});
|
|
|
|
},
|
2017-05-03 16:19:12 +08:00
|
|
|
},
|
2019-05-07 14:57:32 +08:00
|
|
|
{
|
|
|
|
key: 'odd',
|
|
|
|
text: 'Select Odd Row',
|
|
|
|
onSelect: changableRowKeys => {
|
|
|
|
let newSelectedRowKeys = [];
|
|
|
|
newSelectedRowKeys = changableRowKeys.filter((key, index) => {
|
|
|
|
if (index % 2 !== 0) {
|
|
|
|
return false;
|
|
|
|
}
|
2017-02-23 19:29:47 +08:00
|
|
|
return true;
|
2019-05-07 14:57:32 +08:00
|
|
|
});
|
|
|
|
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 });
|
|
|
|
},
|
2017-02-23 19:29:47 +08:00
|
|
|
},
|
2019-05-07 14:57:32 +08:00
|
|
|
],
|
2017-02-23 19:29:47 +08:00
|
|
|
};
|
2019-05-07 14:57:32 +08:00
|
|
|
return <Table rowSelection={rowSelection} columns={columns} dataSource={data} />;
|
2017-02-23 19:29:47 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
ReactDOM.render(<App />, mountNode);
|
2019-05-07 14:57:32 +08:00
|
|
|
```
|