如果使用格式化程序进行显示，如何在 bootstrap-vue 中对日期列进行排序？

Question

我有一个带有日期对象的表，我将其转换为显示如下：

{
   key: "date",
   formatter: (value, key, item) => {
     return moment(value).format("L");
   },
   sortable: true
}

这打破了排序功能，因为 是一个本地化的字符串。我想做类似的事情

 sortingKey: value=>value

要覆盖呈现日期的字符串排序并返回按日期排序，但我找不到类似的东西。

更新：这已经解决了，但对我来说解决方案并不漂亮。一个更漂亮的解决方案是：

field: {
  key: 'date',
  sorter: (value, item, fieldMeta) => {
    // returns something that reacts to <
    // key == fieldMeta.key
    // default (current) implementation
    return fieldMeta.formatter ? fieldMeta.formatter(value, fieldMeta.key, item) : value;
  }

Answer 1

该sort-compare函数将是你的朋友。基本的排序比较方法比较两个值，并且至少需要三个参数： item a、 itemb和key要排序的字段。注意a和b是正在比较的整个行数据对象。

对于上面的示例，请执行以下操作：

export default {
  // ...
  methods: {
    mySortCompare(a, b, key) {
      if (key === 'date') {
        // Assuming the date field is a `Date` object, subtraction
        // works on the date serial number (epoch value)
        return a[key] - b[key]
      } else {
        // Let b-table handle sorting other fields (other than `date` field)
        return false
      }
    }
  }
  // ...
}

<b-table :items="items" :fields="fields" :sort-compare="mySortCompare">
  <!-- ... -->
</b-table>