获取row元素形式的row.clicked事件 [英] Get row element form row.clicked event
问题描述
我正在使用Bootstrap Vue中的Table,并且试图在单击一行时显示行详细信息.
I'm using Table from Bootstrap Vue, and I'm trying to display row details when clicking on a row.
我使用doc所说的row-clicked
事件,但是用toggleDetails
方法找不到任何行详细信息.
因此,我什至不知道如何打开它以及toggleDetails
的来源.
I used row-clicked
event as the doc said, but I don't find any row details with a toggleDetails
method.
So I don't even know how to open it and where toggleDetails
come from.
有一种方法可以通过row.clicked
事件打开此详细信息行?
There is a way to open this details row with row.clicked
event ?
还是应该使用其他方法来做到这一点?
Or should I use another method to do this ?
您有一些线索吗?
编辑
有一些代码可以进一步说明我的问题,我的表包含明细行.
There is some code to illustrate a bit more my problem, there is my table with the details row.
<b-table
v-if="items"
:items="items"
:fields="fields"
show-empty
striped
hover
responsive
empty-text="There is no messages to show"
class="col-sm-12 col-md-10"
@row-clicked="test"
>
<template
slot="message"
slot-scope="row"
>
{{ row.item.message }}
</template>
<template
slot="row-details"
slot-scope="row"
>
<code>{{ row.item.message }}</code>
</template>
</b-table>
您可以看到我在表上使用的row.clicked
事件,然后可以看到试图打开行详细信息的方法.这是一些console.log的简单方法.
You can see the row.clicked
event I use on the table, and then my methods where I'm trying to open the row details. It's a simple method with some console.log
methods: {
test(item, index, event) {
console.log(item, index, event);
},
},
推荐答案
所有您需要做的就是在基本"行中的某个位置(可能在名为 actions 的行单元中)放置一个按钮会为此特定行调用toggleDetails
函数.
All you have to do is to place somewhere in your "base" row (probably in a row cell called actions) a button that calls the toggleDetails
function for this specific row.
此按钮和详细信息行的代码应如下所示:
The code for this button and the details row should be like this:
<template slot="actions" slot-scope="row">
<!-- We use @click.stop here to prevent a 'row-clicked' event from also happening -->
<b-button size="sm" @click.stop="row.toggleDetails">
{{ row.detailsShowing ? 'Hide' : 'Show' }} Details
</b-button>
</template>
<template slot="row-details" slot-scope="row">
<!-- Your row details' content here -->
</template>
您可以在文档中找到更多示例和说明.
如果要通过单击行中的任意位置来显示行详细信息,首先应为每个项目对象添加一个_showDetails
变量:
If you want to show the row details by clicking anywhere in the row, firstly you should add a _showDetails
variable to each item object:
items: [
{ foo: true, bar: 40, _showDetails: false },
...
{ foo: true, bar: 100, _showDetails: false }
]
然后,您只需要为行单击事件添加适当的功能:
Then you just have to add the proper functionality for the row-clicked event:
<b-table @row-clicked="onRowClicked" ...></b-table>
在您的组件方法中:
methods: {
onRowClicked (item, index, event) {
item._showDetails = !item._showDetails;
}
}
这篇关于获取row元素形式的row.clicked事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!