问题:如果使用格式化程序进行显示,如何在 bootstrap-vue 中对日期列进行排序?

我有一个包含日期对象的表,我将其转换为如下显示:

{
   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;
  }

解答

sort-compare函数将成为你的恶魔。基本的排序比较方法比较两个值,并且至少需要三个参数:项目a、项目b和正在排序的字段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>