Bootstrap Vue Table-从多个表中获取选择？

Question

我一直在使用Bootstrap Vue和桌子。

我的问题如下：我有几个表是动态加载在页面上的，用户应该能够在每个表中选择项目。然后，所有选择都应串联到一个数组中，然后可以在页面顶部显示它。

到目前为止，我已经在每个表中添加了以下内容：

@row-selected="onRowSelected"

以及以下方法：

methods: {

            onRowSelected(items) {

                items.forEach((item) => {
                    if (!this.selectedHashtags.includes(item.hashtag)) {
                        this.selectedHashtags.push(item.hashtag);
                    }
                })

            },
}

问题是，一旦我从表中取消选择一项，它就不会将其从数组中删除，而我正在努力寻找一种使这项工作有效的方法。

[不幸的是，@row-selected事件没有发送表的ID / ref，我找不到从每个表中获取所有选定行的方法。这样，我就可以遍历所有this.$refs并获取所有选定的行，并在每次单击行时将它们捆绑在一起。

基本上，最简单的方法是，如果有一种方法可以通过编程方式从表中获取所有选定的项目？

关于实现此目标的最佳方法的任何想法？

Answer 1

[最简单的方法可能是将所选值与每个表的唯一键一起存储。然后，您将像使用关键字$event一样调用该方法（请参见the documentation）：

@row-selected="onRowSelected('table1', $event)"

您还可以在模板中包装一个内联函数以实现相同的结果：

@row-selected="(items) => onRowSelected('table1', items)"

然后，您将根据表键将项目存储在对象中：

onRowSelected(tableKey, items) {
  // clears the list of this table key and overwrites it with the current entries
  this.selectedHashtags[tableKey] = items;
}

然后您可以定义一个计算变量以检索所有选定的主题标签（在所有表上）：

allSelectedHashtags() {
   const allSelectedHashtags = [];
   Object.keys(this.selectedHashtags).forEach(tableArray => {
     allSelectedHashtags.concat(tableArray);
   });
   return allSelectedHashtags;
}