Question

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

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

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

我想要实现的是：

Answer 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

Answer 2

据我了解，OP正在询问：

“如何强制<b-table>组件自行（重新）排序而不需要用户单击该<b-table>组件？”

我的回答（针对他们）：

检测提到的“可见标题”上的点击事件
在该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>

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

2 个答案: