最近在寫后臺(tái)管理系統(tǒng)時(shí)，遇到一個(gè)需求，就是給表格中的某些字段添加排序功能。注意該表格是不分頁的，因此排序可以只通過前端處理。

如下圖所示：

在antd官網(wǎng)上是有關(guān)于表格排序的功能的。

對(duì)某一列數(shù)據(jù)進(jìn)行排序，通過指定列的sorter函數(shù)即可啟動(dòng)排序按鈕，sorter:function(rowA,rowB){...},rowA、rowB為比較的兩個(gè)行數(shù)據(jù)。

官網(wǎng)中的示例如下：

給指定列添加sorter屬性

{title: 'Age',dataIndex: 'age',defaultSortOrder: 'descend',sorter: (a, b) => a.age - b.age,
},

上面的排序是順序，如果改為sorter: (a, b) => b.age - a.age,則為逆序。這種排序方法適用于數(shù)字大小的比較，或者英文字符的比較，如果是漢字，則不適用。

下面介紹針對(duì) 數(shù)字 漢字 布爾類型的排序方法

1.針對(duì)數(shù)字 漢字 布爾類型的排序，都要先指定sorter屬性，指定該字段是要進(jìn)行排序的字段

{dataIndex: 'designator',//字符串title: '位號(hào)',sorter: (a, b) => a.designator - b.designator,width: 150,},{dataIndex: 'singleDosage',title: '單量',sorter: (a, b) => a.singleDosage - b.singleDosage,type: 'number',//數(shù)字width: 90,},{dataIndex: 'bomType',title: '供料方式',scopedSlots: { customRender: 'bomType' },sorter: (a, b) => a.bomType - b.bomType,type: 'boolean',//布爾類型width: 90,},

2.監(jiān)聽表格的change事件

<a-table:data-source="tableList":columns="bomColumns":pagination="false"stripe:key="1"borderedstyle="width: 100%"@change="changeBomTable":scroll="{ y: 400, x: 1000 }"
>
</a-table>

3.表格change事件中判斷

changeBomTable(pagination, filters, sorter, arr) {if (sorter && sorter.columnKey) {if (sorter.column &&sorter.column.type != 'number' &&sorter.column.type != 'boolean') {let list = this.tableList.sort(this.sortBy(sorter.columnKey,sorter && sorter.order == 'ascend' ? true : false));this.tableList = list;}}
},
sortBy(field, flag) {return function(a, b) {if (flag) {return b[field].localeCompare(a[field]);} else {return a[field].localeCompare(b[field]);}};
},

其實(shí)上面的排序方法只對(duì)漢字字符串進(jìn)行了處理，其他的數(shù)字和布爾類型都沒有單獨(dú)處理，默認(rèn)的sorter: (a, b) => a.xx- b.xx,就可以實(shí)現(xiàn)數(shù)字和布爾類型的排序了。

完成！！！多多積累，多多收獲！