Сортировать таблицу Bootstrap-Vue (пн, вт, ср вместо алфавита) - PullRequest
Новая
       12

Сортировать таблицу Bootstrap-Vue (пн, вт, ср вместо алфавита)

1 голос
/ 03 июля 2019

У меня есть таблица, которая извлекает информацию из базы данных, используя Bootstrap-vue. В базе данных есть поле с именем «день», в котором хранятся строковые значения «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>

Вю: 

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

В настоящее время этот код будет сортироваться по алфавиту в столбце дня. Я бы хотел, чтобы это сортировалось по дате, например «пн», «вт», «ср» и т. д.

1 Ответ

4 голосов
/ 04 июля 2019

Вы можете использовать свой собственный метод сортировки, подключившись к подпрограмме :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 - это ограничение значения от -1 до 1, которое требуется для нормальной работы sort-compare.

Вот пример рабочих кодов и коробки . Вы можете прочитать больше о подпрограмме sort-compare в документах .

Спасибо @TroyMorehouse за указание на лучший подход.

...