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>

Vue：

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指出了一种更好的方法。

对Bootstrap-Vue表进行排序（星期一，星期二，星期三而不是字母顺序）

1 个答案: