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

Posted 2023-02-23

【中文标题】Vue-Bootstrap：如何触发一个 b-table 的排序以触发另一个 b-table 的排序？

【英文标题】：Vue-Bootstrap: how to trigger sorting of one b-table to trigger sorting of the another b-table?

【发布时间】：2019-08-09 23:13:21

【问题描述】：

我正在使用VueBoostrap<b-table> 组件，与sorting routine applied 结合使用。在我的项目中，我有一些更复杂的排序例程，但对于这个虚拟示例，我将使用默认的。

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

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

我想要实现的是：

【参考方案1】：

如果您仔细查看文档 (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

【参考方案2】：

据我了解，OP 在问：

“如何强制<b-table> 组件自行（重新）排序而不要求用户单击该<b-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>