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

Question

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

目前在 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>`

Answer 1

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

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 的文档中有一个很好的例子