ant design 表格通过发送请求排序方法

首先,在columns需要排序的那一项中加上sorter: true,因为sorter会触发Table的onChange方法,因此onChange中可以调用获取数据的接口

 
sorterFun = (pagination,filters,sorter) => {
    let sortType = sorter.order // 排序类型,正序/倒叙/不排序
    if (sortType) {
      this.getDataList(sortType === 'ascend' ? 'asc' : 'desc')
    } else {
      this.getDataList()
    }
  }
render() {
  const columns = [
      {
        title: '序号',
        width: 80,
        dataIndex: 'index',
        key: 'index',       render: (text,record, index) => `${index + 1}`,
      },
      {
        title: '单位类型名称',
        width: 150,
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '单位数',
        dataIndex: 'num',
        key: 'num',
        width: 100,
        sorter: true
      }]
   <Table columns={columns} dataSource={dataList} rowKey="id" onChange={this.sorterFun}/>
}

 


版权声明:本文为qq_41862017原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。