Bootstrap-Vue表排序(mon、tue、wed而不是按字母顺序)

基础概念

Bootstrap-Vue 是基于 Bootstrap 4 和 Vue.js 的组件库，提供了丰富的 UI 组件，用于快速构建响应式的前端应用。表排序（Table Sorting）是指在表格中对某一列的数据进行排序的功能。

类型

Bootstrap-Vue 的表排序功能可以分为客户端排序和服务器端排序两种类型：

客户端排序：数据在客户端进行排序，适用于数据量较小的情况。
服务器端排序：数据在服务器端进行排序，适用于数据量较大的情况。

应用场景

表排序功能广泛应用于各种需要展示和排序数据的场景，例如：

项目管理工具中的任务列表
电商网站的商品列表
日历应用中的事件安排

问题及解决方法

问题：Bootstrap-Vue 表排序按星期几（mon、tue、wed）而不是按字母顺序

原因：默认情况下，表格排序是按照字母顺序进行的，而星期几的缩写（如 mon、tue、wed）在字母顺序上并不直观。

解决方法：

自定义排序函数：可以通过自定义排序函数来实现按星期几的顺序排序。

<template>
  <b-table :items="items" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :sort-method="customSort">
    <template v-slot:cell(day)="data">
      {{ data.item.day }}
    </template>
  </b-table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { day: 'mon', value: 1 },
        { day: 'tue', value: 2 },
        { day: 'wed', value: 3 },
        // 其他数据
      ],
      sortBy: 'day',
      sortDesc: false
    };
  },
  methods: {
    customSort(a, b) {
      const days = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
      return days.indexOf(a) - days.indexOf(b);
    }
  }
};
</script>

参考链接：