2016-11-03 16:05:59 +08:00
|
|
|
---
|
|
|
|
order: 4
|
|
|
|
title:
|
2020-05-13 19:15:40 +08:00
|
|
|
zh-CN: 分页
|
|
|
|
en-US: Pagination
|
2016-11-03 16:05:59 +08:00
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
2020-05-13 19:15:40 +08:00
|
|
|
大数据下使用分页。
|
2016-11-03 16:05:59 +08:00
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
2020-05-13 19:15:40 +08:00
|
|
|
large count of items with pagination.
|
2016-11-03 16:05:59 +08:00
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
```jsx
|
2020-05-13 19:15:40 +08:00
|
|
|
import { Transfer, Switch } from 'antd';
|
2016-11-03 16:05:59 +08:00
|
|
|
|
2020-05-13 19:15:40 +08:00
|
|
|
const App = () => {
|
|
|
|
const [oneWay, setOneWay] = React.useState(false);
|
|
|
|
const [mockData, setMockData] = React.useState([]);
|
|
|
|
const [targetKeys, setTargetKeys] = React.useState([]);
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2020-05-13 19:15:40 +08:00
|
|
|
React.useEffect(() => {
|
|
|
|
const newTargetKeys = [];
|
|
|
|
const newMockData = [];
|
2016-11-03 16:05:59 +08:00
|
|
|
for (let i = 0; i < 2000; i++) {
|
|
|
|
const data = {
|
|
|
|
key: i.toString(),
|
|
|
|
title: `content${i + 1}`,
|
|
|
|
description: `description of content${i + 1}`,
|
|
|
|
chosen: Math.random() * 2 > 1,
|
|
|
|
};
|
|
|
|
if (data.chosen) {
|
2020-05-13 19:15:40 +08:00
|
|
|
newTargetKeys.push(data.key);
|
2016-11-03 16:05:59 +08:00
|
|
|
}
|
2020-05-13 19:15:40 +08:00
|
|
|
newMockData.push(data);
|
2016-11-03 16:05:59 +08:00
|
|
|
}
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2020-05-13 19:15:40 +08:00
|
|
|
setTargetKeys(newTargetKeys);
|
|
|
|
setMockData(newMockData);
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const onChange = (newTargetKeys, direction, moveKeys) => {
|
|
|
|
console.log(newTargetKeys, direction, moveKeys);
|
|
|
|
setTargetKeys(newTargetKeys);
|
2019-05-07 14:57:32 +08:00
|
|
|
};
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2020-05-13 19:15:40 +08:00
|
|
|
return (
|
|
|
|
<>
|
2016-11-03 16:05:59 +08:00
|
|
|
<Transfer
|
2020-05-13 19:15:40 +08:00
|
|
|
dataSource={mockData}
|
|
|
|
targetKeys={targetKeys}
|
|
|
|
onChange={onChange}
|
2016-11-03 16:05:59 +08:00
|
|
|
render={item => item.title}
|
2020-05-13 19:15:40 +08:00
|
|
|
oneWay={oneWay}
|
|
|
|
pagination
|
|
|
|
/>
|
|
|
|
<br />
|
|
|
|
<Switch
|
|
|
|
unCheckedChildren="one way"
|
|
|
|
checkedChildren="one way"
|
|
|
|
checked={oneWay}
|
|
|
|
onChange={setOneWay}
|
2016-11-03 16:05:59 +08:00
|
|
|
/>
|
2020-05-13 19:15:40 +08:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
2016-11-03 16:05:59 +08:00
|
|
|
|
2022-04-15 16:20:56 +08:00
|
|
|
export default App;
|
2019-05-07 14:57:32 +08:00
|
|
|
```
|