Sort Bootstrap-Vue table (mon, tue, wed 而不是字母顺序)

Question

我有一个 table 使用 Bootstrap-vue 从数据库中提取信息。数据库有一个名为 "day" 的字段，它存储 "mon"、"tue"、"wed" 等字符串值。我希望能够对 table 进行排序按天而不是按字母顺序按此列。有办法吗？

我对 Vue 和 Bootstrap Vue 还很陌生。我已经设置了 table，它可以很好地从数据库中提取信息。它将每个存储为一个对象，并根据定义的字段显示它。

用于可视化问题的简化代码：

HTML:

<div id='root'>
   <b-container fluid>
      <h1>Welcome</h1>
      <br/>
      <b-table
         show-empty
         stacked="md"
         :items="tableItems"
         :fields="fields"
         sort-by="day"
      >
      </b-table>
   </b-container>
</div>

视觉：

new Vue({
el: '#root',
data() {
   return {
      tableItems: [
         {name: 'Mark', age: '23', day:'wed'},
         {name: 'John', age: '21', day:'thu'},
         {name: 'Stephen', age: '24', day:'tue'},
         {name: 'Will', age: '31', day:'fri'},
         {name: 'Andrew', age: '27', day:'wed'},
         {name: 'James', age: '24', day:'mon'},
         {name: 'Shawn', age: '29', day:'tue'},
      ],
      fields: [
         { key: 'name', label: 'Name', sortable: true},
         { key: 'age', label: 'Age', sortable: true, class: 'text-center' },
         { key: 'day', label: 'Day', sortable: true},
      ],
      }
   }
});

目前此代码将在日期列中按字母顺序排序。我希望它按 "date" 排序，例如"mon"、"tue"、"wed"、等等

Answer 1

您可以通过挂接到 :sort-compare 例程来使用您自己的自定义排序方法。

  <b-table
     show-empty
     stacked="md"
     :items="tableItems"
     :fields="fields"
     :sort-compare="sortingChanged"
  >

然后定义一个字典来给你的日子值。

const days = {
  "sun": 0,
  "mon": 1,
  "tue": 2,
  "wed": 3,
  "thu": 4,
  "fri": 5,
  "sat": 6,
};

最后处理排序。

  methods: {
    sortingChanged(a, b, key) {
      let result = 0;
      if (key === 'day') {
          let day1 = a[key].toLowerCase();
          let day2 = b[key].toLowerCase();
          return days[day1] - days[day2];
      } 
      return false;
    }
  }

数学。min/max 的内容是将 sort-compare 例程正常工作所需的值限制在 -1 和 1 之间。

这是一个working codesandbox example. You can read more about the sort-compare routine in the docs。

感谢@TroyMorehouse 指出更好的方法。

Sort Bootstrap-Vue table (mon, tue, wed 而不是字母顺序)

Sort Bootstrap-Vue table (mon, tue, wed instead of alphabetical)

javascript

vue.js

bootstrap-vue