數組排序參考連接:https://blog.csdn.net/hongc93/article/details/86520516
//降序
function sortDescByKey(arr, key) {
return arr.sort(function (a, b) {
let x = a[key]
let y = b[key]
return ((x > y) ? -1 : (x < y) ? 1 : 0)
})
};
//升序
function sortAscByKey(arr, key) {
return arr.sort(function (a, b) {
let x = a[key]
let y = b[key]
return ((x < y) ? -1 : (x > y) ? 1 : 0)
})
};
數組的sort屬性若是不加回調的話只能排下標10之內的數組
加了回調的話就返回的是形參,回調中 例如文中的 a b 都是傳入arr數組(集合)中的對象
若是當中指定的key對應的值進行對比時,返回的是正數a,b則調換位置,爲負數則不調換位置
localeCompare():根據拼音首字母來排序,若是首字母同樣就比較第二個字母
ary.sort(function(a,b){
return a.name.localeCompare(b.name);
})
下面來講下頁面怎麼寫:
要進行自定義的排序必須在<el-table>中讓 sortable='custom' ,而後監聽 @sort-change="sortChange"這個方法
這個方法有一個返回值是 column 如代碼中,其中
column:當前列
column.prop:當前列須要排序的數據
column.order:排序的規則(升序ascending、降序 descending 和默認 null [默認就是沒排序])
//全數據排序 用因而引入的工具類的函數,由於不是vue寫法因此sortDescByKey函數沒有this指向
//dataList 是表格渲染的數據 若是是後臺分頁則須要進行請求後臺排完序返回給前端作數據渲染
sortChange(column) {
var self = this;
self.tableOrder = column.order;
self.tableProp = column.prop;
if (self.dataList.length > 0) {
if ("descending" == column.order) {
self.dataList= sortDescByKey(self.dataList, column.prop);
} else {
self.dataList= sortAscByKey(self.dataList, column.prop);
}
}
},
更新:————————————————————————————————————————————————————————————————————————
測試出來一個問題,是這個排序會在剛加載的時候莫名其妙的會有一個隨機位置的數據排在第一條通過各類測試沒有測出來什麼緣由,可是猜想多是排序是默認的三個值有關,就去掉排序裏面的null值,並設置默認的排序這樣問題就解決了,可是瀏覽器報了一個錯,說是傳入排序的集合的長度爲0,須要判斷傳入集合是否有值
:sort-orders="['ascending', 'descending']"
:default-sort="{prop: 'id', order: 'ascending'}"
}