Vue-Bootstrap：如何触发一个b-table的排序来触发另一个b-table的排序？

Question

我正在使用 VueBoostrap <b-table> components, in a combination with sorting routine applied。在我的项目中，我有一些更复杂的排序例程，但对于这个虚拟示例，我将使用默认的。

当对 b-table 应用排序时，table 仅根据 table header 中单击的字段进行排序。但我需要实现的是将 table header 从 table 内容中拆分出来（因为我想稍后将内容放在可滚动的 div 中，而 header 在顶部保持静态 - 因为用户将滚动）。

给出了完整的代码 on this link（检查 componets/TableTest.vue），其中我有三个 <b-table> 组件。第一个只是一个虚拟示例，接下来的两个与第一个相同，但其中一个 header 被隐藏，另一个 body 被隐藏。

我想实现的是：

Answer 1

如果仔细查看文档 (https://bootstrap-vue.js.org/docs/components/table)，您会发现 <b-table> 组件发出了某些事件。
其中之一是 sort-changed。因此，如果您在 header only 组件上收听它，然后设置一个 sortBy 属性并将其传递给 body only 组件，那么您就完成了。

//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

Answer 2

据我了解，OP 要求：

"How do I force a <b-table> component to (re)sort itself without requiring the user to click on that <b-table> component?"

我的回答（在他们的情况下）：

检测提到的"visible header"上的点击事件
在该点击事件的函数处理程序中，从目标 table

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>

Vue-Bootstrap：如何触发一个b-table的排序来触发另一个b-table的排序？

Vue-Bootstrap: how to trigger sorting of one b-table to trigger sorting of the another b-table?

vue.js

vuejs2

vue-component

bootstrap-vue

vue-events