Vue 按照數組對象的屬性進行排序（包含時間格式排序）

Vue 數組對象排序（包含時間格式排序）

最後完成後的效果大概是這樣

1. 排序方法

這裡用到的是數組的sort方法，這個方法有一個需要注意的地方，就是不傳參數的話，将按字母順序對數組中的元素進行排序，說得更精确點，是按照字元編碼的順序進行排序。這并不是我們想要的排序方法，是以必須要傳參。

sort方法的參數是一個函數，這個函數提供了一個比較方法，要比較兩個值，然後傳回一個用于說明這兩個值的相對順序的數字。

• [ 若 a 小于 b，在排序後的數組中 a 應該出現在 b 之前，則傳回一個小于 0 的值。 ]
• [ 若 a 等于 b，則傳回 0。 ]
• [ 若 a 大于 b，則傳回一個大于 0 的值。 ]

compare(attr){                  // 排序方法
         let that = this;
         return function(a,b){
                 let val1 = a[attr];
                 let val2 = b[attr];
                 if(that.order){
                         if(that.sortType == 'time'){            // 如果是時間就轉換成時間格式
                                 return new Date(val2.replace(/-/,'/')) - new Date(val1.replace(/-/,'/'));
                         }else{
                                 return val2 - val1;
                         }
                 }else{
                         if(that.sortType == 'time'){	    // 如果是時間就轉換成時間格式
                                 return new Date(val1.replace(/-/,'/')) - new Date(val2.replace(/-/,'/'));
                         }else{
                                 return val1 - val2;
                         }
                 }
         }
 }
           

在代碼中，compare函數中的匿名函數就是這樣一個函數，但這個函數外面又嵌套了一層，這是因為需要根據數組中的某一項來排序，是以需要把這一項的key值傳進來。

– 好了，下面放一下整體代碼：

<template>

	<div class="top">
		<div class="th  name">顧客名稱</div>
		<div class="th phone">手機号碼</div>
		<div class="th ticket" @click="sort('ticket')">卡券
			<i class="fa fa-exchange" aria-hidden="true"></i>
		</div>
		<div class="th integral" @click="sort('integral')">積分
			<i class="fa fa-exchange" aria-hidden="true"></i>
		</div>
		<div class="handle"></div>
		<div class="th time" @click="sort('time')">建立時間
			<i class="fa fa-exchange" aria-hidden="true"></i>
		</div>
	</div>

</template>
           

js

<script>
	data: function(){
        return {
                Dmessages: [{
					name: '吳嬌',
	                phone: [phone],
		            ticket: 3,
	                integral: 300000,
					time:'2019-1-19',
				},{
                       name: '忙着長肉',
                       phone: [phone],
                       ticket: 2,
                       integral: 50000,
                       time:'2019-1-29'
               },{
                       name: '劉珊珊',
                       phone: [phone],
                       ticket: 5,
                       integral: 3000,
                       time:'2019-1-22'
               },{
                       name: '劉珊珊',
                       phone: [phone],
                       ticket: 9,
                       integral: 90000,
                       time:'2019-1-30'
               }],
               sortType: null,                 // 數組對象中的哪一個屬性進行排序
               order: false,                   // 升序還是降序
        }
	},
	methods: {
        sort(type){                     // 排序
                this.order = !this.order;		// 更改為 升序或降序
                this.sortType = type;
                this.Dmessages.sort(this.compare(type));
                // 調用下面 compare 方法 并傳值
        },
        compare(attr){                  // 排序方法
                let that = this;
                return function(a,b){
                        let val1 = a[attr];
                        let val2 = b[attr];

                        if(that.order){
                                if(that.sortType == 'time'){            // 如果是時間就轉換成時間格式
                                        return new Date(val2.replace(/-/,'/')) - new Date(val1.replace(/-/,'/'));
                                }else{
                                        return val2 - val1;
                                }

                        }else{
                                if(that.sortType == 'time'){
                                        return new Date(val1.replace(/-/,'/')) - new Date(val2.replace(/-/,'/'));
                                }else{
                                        return val1 - val2;
                                }
                        }
                }
        }
},
</script>
           

雖然是一個簡單的功能，但是還是非常值得總結一下。