mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-16 01:41:02 +08:00
87 lines
1.6 KiB
Markdown
87 lines
1.6 KiB
Markdown
|
---
|
||
|
order: 7
|
||
|
title:
|
||
|
en-US: Multiple sorter
|
||
|
zh-CN: 多列排序
|
||
|
---
|
||
|
|
||
|
## zh-CN
|
||
|
|
||
|
`column.sorter` 支持 `multiple` 字段以配置多列排序优先级。通过 `sorter.compare` 配置排序逻辑,你可以通过不设置该函数只启动多列排序的交互形式。
|
||
|
|
||
|
## en-US
|
||
|
|
||
|
`column.sorter` support `multiple` to config the priority of sort columns. Though `sorter.compare` to customize compare function. You can also leave it empty to use the interactive only.
|
||
|
|
||
|
```jsx
|
||
|
import { Table } from 'antd';
|
||
|
|
||
|
const columns = [
|
||
|
{
|
||
|
title: 'Name',
|
||
|
dataIndex: 'name',
|
||
|
},
|
||
|
{
|
||
|
title: 'Chinese Score',
|
||
|
dataIndex: 'chinese',
|
||
|
sorter: {
|
||
|
compare: (a, b) => a.chinese - b.chinese,
|
||
|
multiple: 3,
|
||
|
},
|
||
|
},
|
||
|
{
|
||
|
title: 'Math Score',
|
||
|
dataIndex: 'math',
|
||
|
sorter: {
|
||
|
compare: (a, b) => a.math - b.math,
|
||
|
multiple: 2,
|
||
|
},
|
||
|
},
|
||
|
{
|
||
|
title: 'English Score',
|
||
|
dataIndex: 'english',
|
||
|
sorter: {
|
||
|
compare: (a, b) => a.english - b.english,
|
||
|
multiple: 1,
|
||
|
},
|
||
|
},
|
||
|
];
|
||
|
|
||
|
const data = [
|
||
|
{
|
||
|
key: '1',
|
||
|
name: 'John Brown',
|
||
|
chinese: 98,
|
||
|
math: 60,
|
||
|
english: 70,
|
||
|
},
|
||
|
{
|
||
|
key: '2',
|
||
|
name: 'Jim Green',
|
||
|
chinese: 98,
|
||
|
math: 66,
|
||
|
english: 89,
|
||
|
},
|
||
|
{
|
||
|
key: '3',
|
||
|
name: 'Joe Black',
|
||
|
chinese: 98,
|
||
|
math: 90,
|
||
|
english: 70,
|
||
|
},
|
||
|
{
|
||
|
key: '4',
|
||
|
name: 'Jim Red',
|
||
|
chinese: 88,
|
||
|
math: 99,
|
||
|
english: 89,
|
||
|
},
|
||
|
];
|
||
|
|
||
|
function onChange(pagination, filters, sorter, extra) {
|
||
|
console.log('params', pagination, filters, sorter, extra);
|
||
|
}
|
||
|
|
||
|
ReactDOM.render(<Table columns={columns} dataSource={data} onChange={onChange} />, mountNode);
|
||
|
```
|