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: 15265320210,
		            ticket: 3,
	                integral: 300000,
					time:'2019-1-19',
				},{
                       name: '忙着长肉',
                       phone: 15265320210,
                       ticket: 2,
                       integral: 50000,
                       time:'2019-1-29'
               },{
                       name: '刘珊珊',
                       phone: 15265320210,
                       ticket: 5,
                       integral: 3000,
                       time:'2019-1-22'
               },{
                       name: '刘珊珊',
                       phone: 15265320210,
                       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>

虽然是一个简单的功能，但是还是非常值得总结一下。