按照数字排序
要求后端返回的level是数字
const columns = [
{
title: '等级,
dataIndex: 'level',
key: 'name',
render: (_) =>_,
sorter: (a, b) => a.level - b.level,
},
]
自定义排序:仅做示例
假设后端返回的不是数字,而是时间,比如2021-05-24 10:54:31
const columns=[ {
title: '时间',
dataIndex: 'gradeUpAt',
render: (_) => _,
sorter: {
compare: (a, b) => {
console.log('a')
a = a.gradeUpAt == '无' ? 0 : new Date(a.gradeUpAt).getTime();
b = b.gradeUpAt == '无' ? 0 : new Date(b.gradeUpAt).getTime();
return a - b;
},
},
},]
通过请求后端接口排序
分为四步:
- columns里面的sorter直接设为true
const columns=[ { title: '时间', dataIndex: 'exp', render: (_) => _, sorter: true },]
- 给table绑定onChange事件
<Table columns={columns} dataSource={tabData} onChange={(pagination, filters, sorter) => { changetable(pagination, filters, sorter) }} />
- 监听onChange事件里面的sorter排序
const changetable = (pagination, filters, sorter) => { if (sorter.order) { //当前处于升序或者降序 sorter.order == "descend" ? '降序' : '升序' } else { //取消排序 } }
- 请求接口