ant表格排序的一点技巧分享

ant表格 单列排序的时候，经常会遇到某几行数据在排序列上的大小一样的情况，这在静态页面（页面只加载一次数据）的情况是没问题的。但是当页面利用websocket进行动态更新（当然也可以ajax定时刷新）时，就会遇到排序列相同数据的几行上下跳动。

原理上很好理解，处理起来也不难：在排序列数据大小相同（这里的大小指的是从对比上讲，比如字符串或者数值等可比较的对象其比较结果相同）时，利用拓展列进行比较。拓展列需根据自己的数据表情况来定，下列分享一个例子：

// 仓位盈亏监控表头
export const watchColumns = [
    {
        title: '账户',
        dataIndex: 'account',
        width: 110,
        ellipsis: true,
        sorter: (a, b) => (a.account + a.contract).localeCompare(b.account + b.contract)
    },
    {
        title: '账户名称',
        dataIndex: 'alias',
        width: 110,
        ellipsis: true
    },
    {
        title: '分组',
        dataIndex: 'tag',
        width: 110,
        ellipsis: true,
        sorter: (a, b) => (a.tag + a.contract + a.number).localeCompare(b.tag + b.contract + b.number)
    },
    {
        title: '合约',
        dataIndex: 'contract',
        width: 110,
        ellipsis: true,
        sorter: (a, b) => (a.contract + a.bs + a.account).localeCompare(b.contract + b.bs + b.account)
    },
    {
        title: '方向',
        dataIndex: 'bs',
        width: 110,
        ellipsis: true,
        sorter: (a, b) => (a.bs + a.contract).localeCompare(b.bs + b.contract)
    },
    {
        title: '持仓数',
        dataIndex: 'number',
        width: 110,
        ellipsis: true,
        sorter: (a, b) => (a.number === b.number ? (a.account + a.contract + a.bs).localeCompare(b.account + b.contract + b.bs) : a.number - b.number)
    },
    {
        title: '可平数',
        dataIndex: 'close_able',
        width: 110,
        ellipsis: true,
        sorter: (a, b) => (a.close_able === b.close_able ? (a.account + a.contract + a.bs).localeCompare(b.account + b.contract + b.bs) : a.close_able - b.close_able)
    },
    {
        title: '盈亏',
        dataIndex: 'profit',
        width: 120,
        ellipsis: true,
        defaultSortOrder: 'descend',
        sorter: (a, b) => (a.profit === b.profit ? (a.account + a.contract + a.bs).localeCompare(b.account + b.contract + b.bs) : a.profit - b.profit),
        scopedSlots: { customRender: 'profit' }
    }
]

这里我重点讲下最后一列盈亏的排序逻辑。由于我这里的数据是根据ctp（期货交易接口）返回情况利用websocket进行推送，这意味着界面的数据是根据行情动态刷新。当利用盈亏进行排序时，如果多个合约的盈亏刚好一样，就会出现开头说的上下随机跳动。我这里的处理逻辑是，如果盈亏大小一样，则利用账户+合约+买卖标志进行字符串排序。这我自己的例子中，每个账户的交易合约按买卖方向进行单独计算，所以这三个要素对整个表格的数据来说就是唯一的。因此在数值大小比较一致的情况下，可以利用他们进行拓展排序。

从上面我分享的表头配置可以看出，我在做排序时，基本上都是利用多要素（列）进行排序的，单要素排序在动态排序时很容易造成上下随机跳动。

另外，这里讲的“多列排序”指的是多要素排序，与ant上的多列排序不是一个概念，大家务必区分开。