gpt4 book ai didi

vue.js - bootstrap-vue 切换扩展表行

转载 作者:行者123 更新时间:2023-12-04 16:29:11 24 4
gpt4 key购买 nike

这似乎仍然没有答案,所以这里是另一种解决方案的尝试。

目前在 bootstrap-vue 中,我正在渲染 b-table .我想通过能够选择一行并折叠/展开额外的 div/row/etc 以显示更多信息来改进这一点。

在下面的片段中,您将看到我正在尝试的内容。问题是我似乎无法获得扩展数据以跨越表中的列数。我试过添加 <tr><td colspan="6"></td></tr>但它似乎并没有像我期望的那样跨越。有什么解决方法吗?谢谢。

<b-table
:items="case.cases"
:fields="tableFields"
head-variant="dark">
<template
slot="meta.status"
slot-scope="data">
<b-badge
v-b-toggle.collapse1
:variant="foobar"
tag="h6">
{{ data.value }}
</b-badge>
</template>
<template
slot="@id"
slot-scope="data">
<span
v-b-toggle.collapse1>
{{ data.value }}
</span>
<b-collapse id="collapse1">
Collapse contents Here
</b-collapse>
</template>
</b-table>`

最佳答案

听起来您可以使用 行详情投币口:

If you would optionally like to display additional record information (such as columns not specified in the fields definition array), you can use the scoped slot row-details



<b-table :items="case.cases" :fields="tableFields" head-variant="dark">
<template slot="meta.status" slot-scope="data">
<b-button @click="data.toggleDetails">
{{ data.value }}
</b-button>
</template>
<template slot="row-details" slot-scope="data">
<b-button @click="data.toggleDetails">
{{ data.detailsShowing ? 'Hide' : 'Show'}} Details }}
</b-button>
<div>
Details for row go here.
data.item contains the row's (item) record data
{{ data.item }}
</div>
</template>
</b-table>

https://bootstrap-vue.js.org/docs/components/table#row-details-support 的文档中有一个很好的例子

关于vue.js - bootstrap-vue 切换扩展表行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54575878/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com