启动表行单击事件

Question

我在Vue项目中使用<b-table>组件，需要定义一个在单击行时触发的函数。我听说b-table中有一个@row-clicked属性，所以我尝试使用它，我可以在其中放入简单的函数，我的意思是我可以获得控制台打印等，但没有更复杂的。。。

我希望在单击一行时执行两个函数。这些函数现在绑定到每行中的一个按钮上，但我不想这样使用它，我只需要单击相关的行就可以使它们工作。以下是b-table组件的当前版本；

<b-table
:items="displayByType"
:fields="displayColumn"
responsive="sm"
:per-page="perPage"
:current-page="currentPage"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
:filter="filter"
:filter-included-fields="filterOn"
@filtered="onFiltered"
hover
@row-clicked="test"
>

这是我想在点击一行时触发的两个函数。。。

toggleRightBar(){
document.body.classList.toggle("right-bar-enabled");
}
changeRightBarContent(row){
this.$store.dispatch("rightbar/changeRightBarInfo", tableData[row]);
},

有一个JavaScript文件夹，我可以导出列名和行数据。我还有一个右栏，当一行被点击时，我想启用右栏，这样用户就可以看到有关该特定行的详细信息。

最后，这里是我用来使这两个功能工作的按钮；

<template #cell(detail)="row">
<button @click="toggleRightBar(); changeRightBarContent(row.index);" class="btn btn-outline-primary toggle-right">
<i class="bx bx-detail toggle-right"></i>
</button>
</template>

基本上，我不想使用这个按钮，相反，我想点击行本身。每一行的右栏信息都是唯一的，我的函数就是这样做的。我只是不知道如何在@row-clicked中使用这两个功能

提前谢谢。

Answer 1

row-clicked事件将向函数传递3个参数。第一个是特定于单击的行的项目。第二个是行的索引，第三个是本机单击事件。

这意味着您可以使用arguments关键字来获取index并将其传递给您的函数。

@row-clicked="toggleRightBar(); changeRightBarContent(arguments[1])"。

或者，您可以创建第三个方法，该方法将调用其他两个方法。

<b-table @row-clicked="onRowClicked" />
{
onRowClicked(item, index, event) {
this.toggleRightBar();
this.changeRightBarContent(index);
}
}

您可以在文档组件参考部分中阅读有关@row-clicked事件的更多信息。https://bootstrap-vue.org/docs/components/table#comp-参考b表-事件