2016-03-31 09:40:55 +08:00
|
|
|
---
|
2016-11-22 10:11:12 +08:00
|
|
|
order: 3
|
2016-08-15 07:54:01 +08:00
|
|
|
title:
|
|
|
|
en-US: Selection and operation
|
|
|
|
zh-CN: 选择和操作
|
2016-03-31 09:40:55 +08:00
|
|
|
---
|
2016-01-01 22:34:59 +08:00
|
|
|
|
2016-08-15 08:07:03 +08:00
|
|
|
## zh-CN
|
|
|
|
|
|
|
|
选择后进行操作,完成后清空选择,通过 `rowSelection.selectedRowKeys` 来控制选中项。
|
|
|
|
|
2016-08-15 07:54:01 +08:00
|
|
|
## en-US
|
|
|
|
|
|
|
|
To perform operations and clear selections after selecting some rows, use `rowSelection.selectedRowKeys` to control selected rows.
|
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
```jsx
|
2016-01-01 22:34:59 +08:00
|
|
|
import { Table, Button } from 'antd';
|
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
const columns = [
|
|
|
|
{
|
|
|
|
title: 'Name',
|
|
|
|
dataIndex: 'name',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Age',
|
|
|
|
dataIndex: 'age',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Address',
|
|
|
|
dataIndex: 'address',
|
|
|
|
},
|
|
|
|
];
|
2016-01-01 22:34:59 +08:00
|
|
|
|
2016-01-01 22:51:26 +08:00
|
|
|
const data = [];
|
|
|
|
for (let i = 0; i < 46; i++) {
|
|
|
|
data.push({
|
|
|
|
key: i,
|
2016-10-02 08:41:53 +08:00
|
|
|
name: `Edward King ${i}`,
|
2016-01-01 22:51:26 +08:00
|
|
|
age: 32,
|
2016-10-02 08:41:53 +08:00
|
|
|
address: `London, Park Lane no. ${i}`,
|
2016-01-01 22:51:26 +08:00
|
|
|
});
|
|
|
|
}
|
2016-01-01 22:34:59 +08:00
|
|
|
|
2017-02-20 14:04:36 +08:00
|
|
|
class App extends React.Component {
|
|
|
|
state = {
|
2017-10-09 13:23:20 +08:00
|
|
|
selectedRowKeys: [], // Check here to configure the default column
|
2017-02-20 14:04:36 +08:00
|
|
|
loading: false,
|
|
|
|
};
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2017-02-20 14:04:36 +08:00
|
|
|
start = () => {
|
2016-01-01 22:34:59 +08:00
|
|
|
this.setState({ loading: true });
|
2016-10-02 08:41:53 +08:00
|
|
|
// ajax request after empty completing
|
2016-01-01 22:34:59 +08:00
|
|
|
setTimeout(() => {
|
|
|
|
this.setState({
|
|
|
|
selectedRowKeys: [],
|
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
}, 1000);
|
2019-05-07 14:57:32 +08:00
|
|
|
};
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
onSelectChange = selectedRowKeys => {
|
2016-01-15 17:21:50 +08:00
|
|
|
console.log('selectedRowKeys changed: ', selectedRowKeys);
|
2016-01-01 22:34:59 +08:00
|
|
|
this.setState({ selectedRowKeys });
|
2019-05-07 14:57:32 +08:00
|
|
|
};
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2016-01-01 22:34:59 +08:00
|
|
|
render() {
|
|
|
|
const { loading, selectedRowKeys } = this.state;
|
|
|
|
const rowSelection = {
|
|
|
|
selectedRowKeys,
|
|
|
|
onChange: this.onSelectChange,
|
|
|
|
};
|
|
|
|
const hasSelected = selectedRowKeys.length > 0;
|
2016-01-07 16:29:12 +08:00
|
|
|
return (
|
|
|
|
<div>
|
2016-01-27 16:44:50 +08:00
|
|
|
<div style={{ marginBottom: 16 }}>
|
2019-05-07 14:57:32 +08:00
|
|
|
<Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}>
|
2017-05-15 14:37:22 +08:00
|
|
|
Reload
|
|
|
|
</Button>
|
2017-05-15 16:36:07 +08:00
|
|
|
<span style={{ marginLeft: 8 }}>
|
|
|
|
{hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
|
|
|
|
</span>
|
2016-01-07 16:29:12 +08:00
|
|
|
</div>
|
|
|
|
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
|
2016-01-01 22:34:59 +08:00
|
|
|
</div>
|
2016-01-07 16:29:12 +08:00
|
|
|
);
|
2017-02-20 14:04:36 +08:00
|
|
|
}
|
|
|
|
}
|
2016-01-01 22:34:59 +08:00
|
|
|
|
2022-04-15 16:20:56 +08:00
|
|
|
export default App;
|
2019-05-07 14:57:32 +08:00
|
|
|
```
|