javascript - 对 Bootstrap-Vue 表进行排序(星期一、星期二、星期三而不是字母顺序)

Question

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

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

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

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>

View :

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},
      ],
      }
   }
});

目前此代码将在日期列中按字母顺序排序。我希望它按“日期”排序，例如“周一”、“周二”、“周三”等

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

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

这是一个 working codesandbox example .您可以在 docs 中阅读有关 sort-compare 例程的更多信息.

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