您所要做的就是将其放置在“基”行中的某个位置(可能位于名为的行单元格中)actions)一个调用的按钮toggleDetails
该特定行的函数。
该按钮和详细信息行的代码应如下所示:
<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>
您可以在中找到更多示例和解释文档 https://bootstrap-vue.js.org/docs/components/table/#row-details-support
如果您想通过单击行中的任意位置来显示行详细信息,首先您应该添加_showDetails
每个项目对象的变量:
items: [
{ foo: true, bar: 40, _showDetails: false },
...
{ foo: true, bar: 100, _showDetails: false }
]
然后您只需为行单击事件添加适当的功能:
<b-table @row-clicked="onRowClicked" ...></b-table>
在你的组件方法中:
methods: {
onRowClicked (item, index, event) {
item._showDetails = !item._showDetails;
}
}