mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-22 14:44:47 +08:00
90 lines
2.0 KiB
Markdown
90 lines
2.0 KiB
Markdown
---
|
|
order: 3
|
|
title:
|
|
en-US: Selection and operation
|
|
zh-CN: 选择和操作
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
选择后进行操作,完成后清空选择,通过 `rowSelection.selectedRowKeys` 来控制选中项。
|
|
|
|
## en-US
|
|
|
|
To perform operations and clear selections after selecting some rows, use `rowSelection.selectedRowKeys` to control selected rows.
|
|
|
|
|
|
````jsx
|
|
import { Table, Button } 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
|
|
loading: false,
|
|
};
|
|
start = () => {
|
|
this.setState({ loading: true });
|
|
// ajax request after empty completing
|
|
setTimeout(() => {
|
|
this.setState({
|
|
selectedRowKeys: [],
|
|
loading: false,
|
|
});
|
|
}, 1000);
|
|
}
|
|
onSelectChange = (selectedRowKeys) => {
|
|
console.log('selectedRowKeys changed: ', selectedRowKeys);
|
|
this.setState({ selectedRowKeys });
|
|
}
|
|
render() {
|
|
const { loading, selectedRowKeys } = this.state;
|
|
const rowSelection = {
|
|
selectedRowKeys,
|
|
onChange: this.onSelectChange,
|
|
};
|
|
const hasSelected = selectedRowKeys.length > 0;
|
|
return (
|
|
<div>
|
|
<div style={{ marginBottom: 16 }}>
|
|
<Button
|
|
type="primary"
|
|
onClick={this.start}
|
|
disabled={!hasSelected}
|
|
loading={loading}
|
|
>
|
|
Reload
|
|
</Button>
|
|
<span style={{ marginLeft: 8 }}>
|
|
{hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
|
|
</span>
|
|
</div>
|
|
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
ReactDOM.render(<App />, mountNode);
|
|
````
|