Как сбросить событие сортировки, которое происходит при щелчке по таблице Beufy с Vue.js

Я разрабатываю интерфейс через Vue.js и Buefy.

Я использую таблицу Buefy для сортировки по событию щелчка в определенном поле. Конечно, по умолчанию мои таблицы отсортированы по порядку создания. (Backend) То, что я хочу сделать, - это временное выравнивание, которое может быть выполнено во внешнем интерфейсе, как сейчас.

Уже это прекрасно. Однако текущие события щелчка столбца не вернутся к порядку сортировки по умолчанию (порядку создания), если они не будут обновлены.

Надеюсь, вы понимаете мои слова. Если вам нужен дополнительный код или объяснение, не стесняйтесь сообщить нам.

Спасибо за чтение.

Жду вашей помощи.

component.vue

<b-table :data="movies">
  <template slot-scope="props">
    <b-table-column centered="true" field="title" label="title" sortable>
      <strong>{{props.row.title}}<strong>
    </b-table-column>
    <b-table-column centered="true" field="content" label="content" sortable>
      <strong>{{props.row.content}}<strong>
    </b-table-column>
  <template>
</b-table>

vue.js buefy bulma
person kaycle    schedule 19.05.2019    source источник
comment
Привет, kaycle, и добро пожаловать на переполнение стека. Я быстро взглянул на исходный код этого компонента, и, похоже, нет никакого способа сбросить порядок сортировки, кроме, как вы обнаружили, обновления реквизита.   -  person Stephen Thomas    schedule 20.05.2019
comment
Вы можете сказать мне, что значит обновить сортировку? Вы хотите использовать пользовательскую сортировку, а не сортировку, предоставляемую Buefy?   -  person kaycle    schedule 20.05.2019
comment
Я имею в виду обновление свойств, которые передаются компоненту таблицы, например this.movies. Я не знаю, подходит ли таблица на место. Если это так, вам нужно будет сохранить копию исходного массива и сбросить фильмы на эту копию. В противном случае вам может сойти с рук что-то вроде this.movies = [...this.movies] в зависимости от других аспектов вашего приложения.   -  person Stephen Thomas    schedule 20.05.2019

Ответы (1)


arrow_upward
0
arrow_downward

Используя Vue, вы можете создать кнопку для перезагрузки таблицы (объяснение ниже).

<button @click="resetSortKey = new Date().toLocaleString()">
  Clear sorting
</button>

<b-table
  :key="resetSortKey"
  <!-- ... -->
</btable>

И не забудьте инициализировать resetSortKey в своих данных.

data() {
  return {
    resetSortKey = 0,
    // All your other stuff.
  }
}

Объяснение

  1. Мы обновляем значение resetSortKey уникальным значением (датой / временем) при каждом нажатии кнопки.

  2. Мы устанавливаем ключ в таблице так, чтобы он перезагружался при изменении значения resetSortKey. Всякий раз, когда таблица перезагружается, она очищает сортировку и восстанавливает порядок по умолчанию.

person 0p3r4t0r    schedule 27.05.2020