[英]Bootstrap Vue table: show details when row clicked
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();
}
Hard to find... but just add this:很难找到...但只需添加以下内容:
@row-clicked="item=>$set(item, '_showDetails', !item._showDetails)"
The $set
preserves the reactivity even if _showDetails
didn't exist.即使_showDetails
不存在, $set
也会保留反应性。
It's a pitty that the row object is not accessible, so toggleDetails is not an option here.遗憾的是,行对象不可访问,因此toggleDetails 不是这里的选项。
As mentioned on the row details support section of the Bootstrap Vue table documentation, you can change the _showDetails
property 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如本代码笔所示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.