最近在用vue+antd做后台管理系统时，遇到一个需求就是要实现table表格某个字段的排序

效果图如下：

在antd官网上，有关于排序的示例：

示例中给出的两个字段的排序

监听change事件，可以获取到当前排序的字段名

由于我这边的需求是按照文字排序，也就是中文文字排序，因此上面的代码不太适合

下面介绍我的写法：

1.给想要排序的字段添加sorter属性，这样才能在表格中有上下箭头的效果

...{title: '订单包',dataIndex: 'groupNo',sorter: (a, b) => a.groupNo - b.groupNo,width: 100,},{title: '订单号',dataIndex: 'orderNo',sorter: (a, b) => a.orderNo - b.orderNo,width: 110,},...

2.给table组件绑定change事件

<a-table:rowKey="(r, i) => r.Id":columns="columns":data-source="tableList":pagination="pagination"bordered:scroll="{ x: 1000, y: 460 }"@change="changeTable">...</a-table>

3.监听change事件

changeTable(pagination, filters, sorter) {console.log(sorter);if (sorter && sorter.columnKey) {let list = this.tableList.sort(this.sortBy(sorter.columnKey,sorter && sorter.order == 'ascend' ? true : false)); //sortBy是根据value字段对对象数组进行排序console.log(this.tableList);this.tableList = list;} else {const pager = {...this.pagination };pager.current = pagination.current;this.pagination = pager;this.getList();}},

先判断是否有sorter，如果有这个属性，则表示可以进行字段的排序，如果没有，则表示是切换了页码或者其他操作，是需要调接口的。

因为我这边的需求是：仅针对当前页面的数据进行排序，不需要调用接口排序。

此时需要用到汉字的排序：

sortBy(field, flag) {return function(a, b) {if (flag) {return b[field].localeCompare(a[field]);} else {return a[field].localeCompare(b[field]);}};},

完成！！！多多积累，多多收获！