Vue-Bootstrap: как запустить сортировку одной b-таблицы, чтобы запустить сортировку другой b-таблицы? - PullRequest
Новая
       36

Vue-Bootstrap: как запустить сортировку одной b-таблицы, чтобы запустить сортировку другой b-таблицы?

0 голосов
/ 19 марта 2019

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

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

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

Чего я хочу достичь: enter image description here

Ответы [ 2 ]

1 голос
/ 19 марта 2019

Если вы внимательно посмотрите на документы (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

0 голосов
/ 12 июня 2019

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

"Как заставить <b-table> компонент перегруппировать себя, не требуя, чтобы пользователь щелкнул по этому компоненту <b-table>?"

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

  1. Обнаружение события щелчка по упомянутому «видимому заголовку»
  2. В обработчике функции для этого события щелчка выведите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>
...