100 lines
1.8 KiB
Vue
100 lines
1.8 KiB
Vue
<docs>
|
||
---
|
||
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.
|
||
|
||
</docs>
|
||
|
||
<template>
|
||
<a-table :columns="columns" :data-source="data" @change="onChange" />
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { defineComponent } from 'vue';
|
||
|
||
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,
|
||
},
|
||
];
|
||
|
||
export default defineComponent({
|
||
setup() {
|
||
return {
|
||
data,
|
||
columns,
|
||
onChange: (pagination, filters, sorter, extra) => {
|
||
console.log('params', pagination, filters, sorter, extra);
|
||
},
|
||
};
|
||
},
|
||
});
|
||
</script>
|