最后使用空值自定义排序 v-data-table

Question

我在 vueJS 中有一个 v-data-table，其中包含一些数字列和一些字符串列。在每一列中，一些值为空。我正在尝试创建一个自定义排序函数，它将空值放在最后。这是我到目前为止尝试过的：

<v-data-table
        :headers="[
          { text: 'Name', value: 'name' },
          { text: 'Date of Birth', value: 'dateofbirth_fmt' },
          { text: 'Team', value: 'team_name' },
          {
            text: 'dp1 (string)',
            value: 'dp1',
          },
          {
            text: 'dp2 (Numeric),
            value: 'dp2',
          }
        ]"
        :items="filteredPlayersData"
        item-key="_id"
        class="elevation-1"
        :custom-sort="customSort"
      />

和这个函数

customSort(items, index, isDesc) {
      items.sort((a, b) => {
        if (!isDesc[0]) {
          return (a[index] != null ? a[index] : Infinity) >
            (b[index] != null ? b[index] : Infinity)
            ? 1
            : -1;
        } else {
          return (b[index] != null ? b[index] : -Infinity) >
            (a[index] != null ? a[index] : -Infinity)
            ? 1
            : -1;
        }
      });
      return items;
    }

它适用于此数字列 (dp1)，但不适用于字符串一 (dp2)。对如何完成这项工作有任何想法吗？

Answer 1

您的排序算法无法正确处理字符串。

假设您的第一个字符串是 null，第二个字符串是 'Jelly bean'。您尝试将 Infinity 与 'Jelly bean'.

相比较，而不是 null 值

这两种情况下的比较都是 false：

let a = Infinity;
let b = 'Jelly bean';
console.log(a > b);
console.log(a < b);

最好使用其他排序算法。

比如我改编了一个算法:

customSort(items, index, isDesc) {
  items.sort((a, b) => {
    if (a[index] === b[index]) { // equal items sort equally
      return 0;
    } else if (a[index] === null) { // nulls sort after anything else
      return 1;
    } else if (b[index] === null) {
      return -1;
    } else if (!isDesc[0]) { // otherwise, if we're ascending, lowest sorts first
      return a[index] < b[index] ? -1 : 1;
    } else { // if descending, highest sorts first
      return a[index] < b[index] ? 1 : -1;
    }
  });
  return items;
}

你可以测试这个at CodePen。适用于字符串和数字。

最后使用空值自定义排序 v-data-table

custom sorting v-data-table with null values last

javascript

sorting

vue.js

vuetify.js