ant design Table本地排序（漢字，數字，字符串）

根據官方文檔介紹 ，排序是在Column上面添加的。

這裏就寫個簡單的例子（只有表頭部分，一看就會）

const columns = [
            {
                title: '漢字',
                dataIndex: 'name',
                sorter:(a,b)=>a.name.localeCompare(b.name)
            },
            {
                title: '數字',
                dataIndex: 'amount',
                sorter: (a, b) => a.amount - b.amount,
            },
            {
                title: '字符串',
                dataIndex: 'value',
                sorter: (a, b) => a.value.localeCompare(b.value)
            }];

漢字這裏我只用的首字母進行排序，對於一般的需求是足夠了。想了解這個的可以看一下 String.prototype.localeCompare()這個函數，鏈接MDN鏈接

數字的話 照着上面例子寫就ok 很簡單

還有一種比較字符串的方法用    Srting.charCodeAt(index)  就是對比相同位置字符的值，

{
                title: '字符串',
                dataIndex: 'pbom',
                sorter: (a, b) => {
                    for (let i = 0; i < a.pbom.length; i++) {
                        if (b.pbom[i] !== undefined) {
                            if (a.pbom.charCodeAt(i) > b.pbom.charCodeAt(i)) {
                                return 1;
                            } else {
                                return -1;
                            }
                        } else {
                            return -1;
                        }
                    }
                }
            }

但是這種方法，數據多了真不好用，不知道什麼原因，統一同localeCompare就挺好的。

 

這裏要說明的是，這種排序 只支持全部數據都存在本地的。比方說後臺如果做了分頁，一次只傳10條數據過來，這個方法只對當前頁生效，這種情況的話，就需要後臺進行排序了。官方文檔也給出了，當需要後臺排序的時候 直接sorter設置爲true即可