Блог

Я использую компоненты VueBoostrap <b-table> в сочетании с применяемой процедурой сортировки. В моем проекте у меня есть несколько более сложных процедур сортировки, но для этого фиктивного примера я буду использовать процедуру по умолчанию.

Когда сортировка применяется для b-таблицы, таблица просто сортируется на основе выбранного поля в заголовке таблицы. Но чего мне нужно добиться, так это отделить заголовок таблицы от содержимого таблицы (поскольку позже я хочу поместить содержимое в прокручиваемый div, а заголовок должен оставаться статичным вверху — по мере того, как пользователь будет прокручивать).

Полный код приведен по этой ссылке (проверьте componets/TableTest.vue ), где у меня есть три <b-table> компонента. Первый пример — это просто фиктивный пример, а следующие два идентичны первому, но для одного из них заголовок скрыт, а для другого тело скрыто.

Чего я хочу добиться, так это:

Если вы внимательно посмотрите на документы (https://bootstrap-vue.js.org/docs/components/table ) вы можете видеть, что есть определенные события, генерируемые <b-table> компонентом.
Одним из них является sort-changed . Итак, если вы прослушаете это в своем компоненте только для заголовка, а затем установите sortBy свойство, которое вы передаете в компонент только для тела, у вас все готово.

 //header only
<b-table ... @sort-changed="sortChanged">

// body only
<b-table :sort-by="sortBy" ...>

sortChanged(e) {
  this.sortBy = e.sortBy
}
  

Полный пример здесь: https://codesandbox.io/s/y30x78oz81

Насколько я понимаю, OP спрашивает :

«Как мне заставить <b-table> компонент (повторно) отсортировать себя, не требуя, чтобы пользователь нажимал на этот <b-table> компонент?»

Мой ответ (в их случае):

1. Обнаружьте событие click в упомянутом «видимом заголовке»
2. В функции-обработчике для этого события click создайте sort-changed событие из целевой таблицы

 // Assuming an SFC (single file component)

<template>
<div>
<b-button @click="handleClick">Sort the table!</b-button>

<b-table ref="mytable" @sort-changed="handleSortChange"></b-table>
</div>
</template>

<script>

export default {
  // ...

  methods: {

    handleClick(evt) {
      /// this is called when you click the button
      this.$refs.mytable.$emit('sort-changed')
    }

handleSortChange(context) {
      // this is called when b-table with ref "mytable" hears the 'sort-changed' event
      // that it has emitted

      // sorting logic goes here
    }
  }
  //...
}


</script>