antd table如何实现column列前后端排序

antd table组件的功能非常强大，可以实现根据column列进行前端和后端排序、筛选等功能，下面潘老师给大家介绍下antd table如何实现前端排序和服务端排序的问题。

一、前端排序

antd table前端排序其实非常简单，我们先看下column列官方API说明：

所以想要实现前端排序，只要在定义column列时，设置sorter属性，再带个回调函数即可，类似如下：

const columns = [
    {
        title: 'Age',
        dataIndex: 'age',
        // 默认降序
        defaultSortOrder: 'descend',
        // 回调函数，返回值boolean类型
        sorter: (a, b) => a.age - b.age,
      }
]

如此就可以实现如图针对Age列的排序效果：

更具体的可以参考官网示例：
[dm href=’https://ant.design/components/table-cn/#components-table-demo-head’]筛选和排序[/dm]

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

二、后端排序

前端排序往往不能满足我们开发的需求，因为一般我们前端都是分页显示的，前端排序只能针对当前页排序，无法全局排序，因此后端排序时很有必要的，相比前端排序而言，后端排序更复杂些，我们第一张图中也看到，sorter是支持后端排序的，只要设置为true即可，那没了回调函数，该如何告知后端根据哪个列进行何种形式的排序呢？这就要我们看下table的api了：

那怎么用呢？大致的案例代码如下：

// table列 const columns = [ { title: 'Name', dataIndex: 'name', // 核心1：sorter设置为true sorter: true, render: name => `${name.first} ${name.last}`, width: '20%', } ] // 模板 render() { const { data, pagination, loading } = this.state; return ( record.login.uuid} dataSource={data} pagination={pagination} loading={loading} // 核心2：在table上绑定onChange事件 onChange={this.handleTableChange} /> ); } //核心3：实现 onchange事件调用后台接口 handleTableChange = (pagination, filters, sorter) => { // fetch方法就是你请求后台数据的api，在此就不详细展示了 this.fetch({ // 核心4：排序相关的两个字段列和排序类型 sortField: sorter.field, sortOrder: sorter.order, pagination, // 筛选的，可以不用管 ...filters, }); };

如此点击排序按钮，就可以触发onChange方法将参数和排序字段以及排序方法传给api接口，然后返回排序好的数据，从而实现后端排序

更加具体的案例代码可以参考官网：
[dm href=’https://ant.design/components/table-cn/#components-table-demo-ajax’]远程加载数据[/dm]
以上就是antd table如何实现根据column列进行前后端排序的方法，如有问题，欢迎留言！