javascript Bootstrap Vue 表：单击行时显示详细信息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52327549/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Vue table: show details when row clicked
提问by anton zlydenko
Trying to achieve different from documentation experience: showing row details not by clicking on the button, but when row clicked. And documentation is a lack of details on how to make it different as in examples.
试图实现与文档体验不同的体验：不是通过单击按钮而是在单击行时显示行详细信息。并且文档缺乏关于如何使其与示例不同的细节。
<b-table
v-if="tableIsReady"
:items="deals"
:fields="fields"
:per-page="recordsPerPage"
no-local-sorting
@sort-changed="sorting"
responsive
flex
striped
hover
@row-clicked="expandAdditionalInfo"
>
<template slot="row-details" slot-scope="row">
<b-card>
<h1>hello</h1>
</b-card>
</template>
</b-table>
Here is my function but I think it's not working at all
这是我的功能，但我认为它根本不起作用
expandAdditionalInfo(row) {
row.showDetails();
}
采纳答案by Tomhah
As mentioned on the row details supportsection of the Bootstrap Vue table documentation, you can change the _showDetailsproperty of the row item:
正如Bootstrap Vue 表文档的行详细信息支持部分所述，您可以更改_showDetails行项的属性：
If the record has it's _showDetails property set to true, and a row-details scoped slot exists, a new row will be shown just below the item, with the rendered contents of the row-details scoped slot.
如果记录的 _showDetails 属性设置为 true，并且存在行详细信息范围的插槽，则将在项目下方显示一个新行，其中包含行详细信息范围插槽的呈现内容。
In your case, you would want something like:
在你的情况下，你会想要这样的：
expandAdditionalInfo(row) {
row._showDetails = !row._showDetails;
},
As demonstrated in this codepen
回答by estani
Hard to find... but just add this:
很难找到...但只需添加以下内容：
@row-clicked="item=>$set(item, '_showDetails', !item._showDetails)"
Explanation
解释
The $setpreserves the reactivity even if _showDetailsdidn't exist.
该$set保留即使反应_showDetails并不存在。
It's a pitty that the row object is not accessible, so toggleDetails is not an option here.
遗憾的是，行对象不可访问，因此toggleDetails 不是这里的选项。
