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

Question

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

{
   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。

https://bootstrap-vue.js.org/docs/components/table#sort-compare-routine

你可以在源代码中看到它是如何使用的：

https://github.com/bootstrap-vue/bootstrap-vue/blob/a660dc518246167aa99cd3cac16b5f8bc0055f2d/src/components/table/helpers/mixin-sorting.js#L85

它是为整个 table 配置的，而不是为单个列配置的。对于应该只使用默认排序顺序的列，您可以 return undefined、null 或 false，这应该会导致它回退到默认排序顺序（请参阅第 104 行到 107).

Answer 2

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>

Answer 3

就我而言，我需要做的就是将 sortByFormatted: true 添加到特定字段：

{
  key: 'name',
  sortable: true,
  sortByFormatted: true,
  formatter: (value, key, item) => {
    return item.first_name + ' ' + item.last_name;
  },
},

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

how to sort date columns in bootstrap-vue if using formatter for displaying?

javascript

vue.js

bootstrap-vue