ant-design/components/table/demo/row-selection-and-operation.md

91 lines
1.9 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +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-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
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:51:26 +08:00
const data = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
2016-01-01 22:51:26 +08:00
age: 32,
address: `London, Park Lane no. ${i}`,
2016-01-01 22:51:26 +08:00
});
}
class App extends React.Component {
state = {
2017-10-09 13:23:20 +08:00
selectedRowKeys: [], // Check here to configure the default column
loading: false,
};
2018-06-27 15:55:04 +08:00
start = () => {
this.setState({ loading: true });
// ajax request after empty completing
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);
this.setState({ selectedRowKeys });
2019-05-07 14:57:32 +08:00
};
2018-06-27 15:55:04 +08:00
render() {
const { loading, selectedRowKeys } = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange,
};
const hasSelected = selectedRowKeys.length > 0;
return (
<div>
<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>
</div>
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
</div>
);
}
}
export default App;
2019-05-07 14:57:32 +08:00
```