Vue ordena según los atributos del objeto de matriz (incluida la clasificación por formato de hora)

Clasificación de objetos de matriz Vue (incluida la clasificación de formato de hora)

El resultado final después de la finalización probablemente sea así

1. Método de clasificación

El método de clasificación de la matriz se utiliza aquí. Una cosa a tener en cuenta sobre este método es que si no se pasan parámetros, los elementos de la matriz se ordenarán en orden alfabético. Para ser más precisos, se hace en el orden de caracteres codificación. Ordenar. Este no es el método de clasificación que queremos, por lo que se deben pasar parámetros.

El parámetro del método de clasificación es una función, esta función proporciona un método de comparación para comparar dos valores y luego devolver un número utilizado para ilustrar el orden relativo de los dos valores.

• [Si a es menor que b, a debería aparecer antes de b en la matriz ordenada y se devuelve un valor menor que 0. ]
• [Si a es igual ab, devuelve 0. ]
• [Si a es mayor que b, se devuelve un valor mayor que 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;
                         }
                 }
         }
 }

En el código, la función anónima en la función de comparación es una función de este tipo, pero hay otra capa anidada fuera de esta función. Esto se debe a que debe ordenarse de acuerdo con un elemento de la matriz, por lo que el valor clave de este elemento necesita para ser pasado Entra.

-De acuerdo, pongamos el código general a continuación:

<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>

Aunque es una función sencilla, merece la pena resumir.