在antd3.0的时候，Table标签的排序只支持单列排序，需求是要多列排序，并且是传参到后台让后台来排序，于是在表头做了点改动，就可以实现多列排序
let = columns =[
title:generateTitle(title，dataIndex，sortArr，sortColumns,()=>this.sortChange(dataIndex)),
dataIndex:"custNo"
]
每一列的表头都按照如上图所示的代码编写；
title：一列表头的名称
dataIndex：就是对应dataIndex的值
sortArr：每一列排序记录先后顺序（客户名称先排列，客户名称就是1，产品代码第二个排列，产品代码就是2）
sortColumns：为了记录当前是升序/降序/不排列的图标，
this.state={
sortColumns:[
{
columnKey:"custNo",
order:""//记录升序/降序
}
]
}
最后一个方法是点击表头的时候，触发的一个方法，
Inked7208441-19f278791c036fa1_LI.jpg
根据调用sortTable返回哪些表头需要排序，调用后台服务进行排序
sortTable方法执行的代码如下：
image.png
这个方法主要是更新sortColumns中对应的order的值，从而页面的图标会改变（向上箭头/向下箭头/没有箭头）
更新sortParamter（["custName asc","age desc"]），主要是把这个参数传到后台，让后台根据前端传递的相应参数，对表头做排序返回给页面
antd4.0新增了多列排序，
image.png
应该也可以配合让后台排序，详细可以去官网看看
https://ant.design/components/table-cn/#components-table-demo-multiple-sorter
网友评论