是否可以使用方法对数组道具进行排序？

Question

我目前有一个用虚拟数据填充表格的数组道具： paymentHistoryList: Array

有四列，但我现在只关注日期。我想要做的是能够通过选择表标题日期来对这个表进行排序，触发升序/降序排序。默认情况下，它按降序排序，并且this.sortByPostedDate 已设置为true。目前，我的表头设置如下：

<th v-on:click="sortBy('postedDate')">DATE</th>

我的方法也是这样。同样，这里还会包含更多案例：

sortBy(column) {
  switch (column) {
    case 'postedDate':
      if (this.sortByPostedDate) {
        this.paymentHistoryList.sort((a, b) => a.paymentScheduledDate - b.paymentScheduledDate);
      } else {
        this.paymentHistoryList.sort((a, b) => b.paymentScheduledDate - a.paymentScheduledDate);
      }
      break;
    default:
      break;
  }
}

这是一张桌子的制作方法：

<table>
  <thead>
    <tr>
      <th v-on:click="sortBy('postedDate')">DATE</th>
      <th class="table-cell">AMOUNT</th>
    </tr>
  </thead>
  <tbody>
    <radio-group>
    <template v-for="(payment) in paymentHistoryList">
      <tr>
        <td>{{ payment.paymentScheduledDate }}</td>
        <td>{{ payment.paymentAmount }}</td>
      </tr>
    </template>
    </radio-group>
  </tbody>
</table>

很遗憾，当单击 Date 表标题时，paymentHistoryList 不会排序。我已经确认标题在被点击时可以识别，但在尝试运行 sortBy 函数时似乎断开连接。

我已经看到通过计算的 mapState 而不是 props 引入表信息的实现方式。道具是问题吗？如果是这样，有没有办法在维护道具的同时实现这一点？

Answer 1

As you specified in the comments, paymentScheduledDate 是一个字符串。这意味着 a.paymentScheduledDate - b.paymentScheduledDate 在使用 sort 方法时不起作用。

sort 被执行并且提供的数组被排序。但是，当减去日期字符串时，您最终会得到NaN。由于所有比较都返回NaN，因此每个元素都保持在完全相同的索引上。

"2020-10-15" - "2020-10-20" //=> NaN

那么你如何对日期进行排序呢？如果它们采用标准 ISO 8601 格式YYYY-MM-DD，您可以简单地按字母顺序排序。这是通过使用<（小于）和>（大于）运算符比较两个字符串来实现的。

"2020-10-15" < "2020-10-20" //=> true
"2020-10-15" > "2020-10-20" //=> false

由于sort 期望回调函数的结果为负数、正数或零，您可以编写如下内容：

const asc  = (fn) => (a, b) => (a = fn(a), b = fn(b), -(a < b) || +(a > b));
const desc = (fn) => (a, b) => asc(fn)(b, a);

asc 为参数a 和b 运行提供的函数fn。然后使用a < b比较结果，如果结果是true返回-1(-true //=> -1)。如果false 测试a > b，如果结果是true，则返回1 (+true //=> 1)。如果false 返回0 (+false //=> 0)。 desc 反转参数，反过来又反转结果。

如果字符串不是标准 ISO 8601 格式，您必须先解析字符串。这可以通过例如Date.parse 来完成。这将返回一个可以相互减去的时间戳：timestampA - timestampB。

这是一个按字母顺序对日期字符串进行排序的示例：

const asc  = (fn) => (a, b) => (a = fn(a), b = fn(b), -(a < b) || a > b);
const desc = (fn) => (a, b) => asc(fn)(b, a);

Vue.component("payment-history", {
  props: ["paymentHistoryList"],
  methods: {
    sortBy(column) {
      switch (column) {
        case 'postedDate':
          this.sortByPostedDate = !this.sortByPostedDate;
          const order = this.sortByPostedDate ? asc : desc;
          this.paymentHistoryList.sort(order(payment => payment.paymentScheduledDate));
          break;
        default:
          break;
      }
    }
  },
  template: `
    <table>
      <thead>
        <tr>
          <th v-on:click="sortBy('postedDate')">DATE</th>
          <th class="table-cell">AMOUNT</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(payment) in paymentHistoryList">
          <tr>
            <td>{{ payment.paymentScheduledDate }}</td>
            <td>{{ payment.paymentAmount }}</td>
          </tr>
        </template>
      </tbody>
    </table>
  `
});

new Vue({
  el: '#payment-history-container',
  data: {
    paymentHistory: [
      {paymentScheduledDate: "2020-01-15", paymentAmount: 1},
      {paymentScheduledDate: "2020-10-10", paymentAmount: 2},
      {paymentScheduledDate: "2002-10-20", paymentAmount: 3},
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="payment-history-container">
  <payment-history :payment-history-list="paymentHistory"></payment-history>
</div>