Clasificación de Vue con celdas vacías que dan como resultado resultados diferentes

2

Tengo una tabla creada que se ordena según el orden asc y desc. Funciona bien cuando las celdas no están vacías, pero cuando está vacío, los resultados cambian cada vez que cambia entre ascendente y descendente.

Aquí está mi código de clasificación:

methods:{
    sort:function(filter) {
      //if filter == current sort, reverse
      if(filter === this.currentSort) {
        this.currentSortDir = this.currentSortDir==='asc'?'desc':'asc';
      }
      this.currentSort = filter;
    },

Y el calculado:

  computed:{
    sortedPeople:function() { //sort by current sorting direction
       return this.people.sort((a,b) => {

        let modifier = 1;
        if(this.currentSortDir === 'desc') modifier = -1;

        if(a[this.currentSort] == null || b[this.currentSort] == null){
            return -1;
        }

        if(a[this.currentSort] <= b[this.currentSort]){ 

            return -1 * modifier;
        }
        if(a[this.currentSort] > b[this.currentSort]) {

            return 1 * modifier; 
        }
        return 0;
      }).filter((row, index) => { //limit view and not repeat due to pagination
        let start = (this.currentPage-1)*this.pageSize;
        let end = this.currentPage*this.pageSize;
        if(index >= start && index < end) return true;
      });
    }
    }

Traté de ordenar las celdas vacías hasta el final, pero mi método no funciona al 100% y realmente no entiendo por qué cambiarían entre interruptores.

Editar: ajusté mi código para que ahora todos estén ordenados juntos, sin embargo, están ordenados antes de "a" al principio, en lugar del final, y no estoy seguro de cómo ordenarlos hasta el final.

sortedPeople:function() { //sort by current sorting direction
   return this.people.sort((a,b) => {

    let modifier = 1;
    if(this.currentSortDir === 'desc') modifier = -1;

    if(a[this.currentSort] == null){ //CHANGED CODE 
        a[this.currentSort] = "";
    } else if (b[this.currentSort] == null){
        b[this.currentSort] = "";
    }

    if(a[this.currentSort] < b[this.currentSort]){ 

        return -1 * modifier;
    }

    if(a[this.currentSort] > b[this.currentSort]) {

        return 1 * modifier; 
    }
    return 0;
  }).filter((row, index) => { //limit view and not repeat due to pagination
    let start = (this.currentPage-1)*this.pageSize;
    let end = this.currentPage*this.pageSize;
    if(index >= start && index < end) return true;
  });
}
2
  • ¿Quiere decir que desea que aparezcan celdas vacías (cadenas, supongo?) Al final de la lista ordenada, independientemente de la dirección de clasificación? 17/10/18 a las 23:09
  • ¡Ah sí, idealmente así! O al menos colocados juntos, en lugar de dispersos en una lista ordenada alfabéticamente correctamente.
    Suchi
    18 oct 2018 a las 0:10
0

Debe verificar explícitamente si hay nullcadenas vacías (o ) sin considerar la dirección de clasificación; algo como lo siguiente

.sort((a,b) => {
    const aValue = a[this.currentSort];
    const bValue = b[this.currentSort];

    if (aValue === bValue) return 0;

    if (!aValue) return 1;
    if (!bValue) return -1;

    let direction = (aValue < bValue) ? -1 : 1;
    if (this.currentSortDir === 'desc') direction *= -1;
    return direction;
})