bootstrap-vue切换扩展表行 [英] bootstrap-vue toggle expand table row

问题描述

这似乎仍然没有答案，因此这是另一种解决方案的尝试.

This seems to remain unanswered so here is another attempt at a solution.

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

Currently in bootstrap-vue, I am rendering a b-table. I would like to improve this by having the ability to select a row and collapse/expand an extra div/row/etc to show further information.

在下面的代码片段中，您将看到我正在尝试的内容.问题是我似乎无法获得扩展的数据来跨越表中的列数.我曾尝试添加<tr><td colspan="6"></td></tr>，但它似乎不像我期望的那样跨度.有任何解决方法吗?谢谢.

In the below snippet you will see what I am trying. The problem is that I can't seem to get the expanded data to span the number of columns in the table. I have tried adding <tr><td colspan="6"></td></tr> but it doesn't seem to span like I would expect. Any workarounds for this? Thanks.

<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>`

推荐答案

听起来像您可以使用 Row Details (行详细信息)插槽一样:

Sounds like you could use the Row Details 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

这篇关于bootstrap-vue切换扩展表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！