在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:""//记录升序/降序
}
]
}
最后一个方法是点击表头的时候,触发的一个方法,
根据调用sortTable返回哪些表头需要排序,调用后台服务进行排序
sortTable方法执行的代码如下:
这个方法主要是更新sortColumns中对应的order的值,从而页面的图标会改变(向上箭头/向下箭头/没有箭头)
更新sortParamter(["custName asc","age desc"]),主要是把这个参数传到后台,让后台根据前端传递的相应参数,对表头做排序返回给页面
antd4.0新增了多列排序,
应该也可以配合让后台排序,详细可以去官网看看
https://ant.design/components/table-cn/#components-table-demo-multiple-sorter