1

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

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

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

我想要实现的是: 在此处输入图像描述

4

2 回答 2

4

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

于 2019-03-19T12:29:54.530 回答
0

据我了解,OP在问:

“我如何强制<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>


于 2019-06-12T18:57:57.047 回答