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

听起来您可以使用Row Details插槽：

如果您希望显示其他记录信息（例如字段定义数组中未指定的列），则可以使用作用域槽 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的文档中有一个很好的例子

Answer 2

我（认为）我遇到了同样的问题，我想出了一个解决方案，利用 bootstrap-vue 的过滤功能<b-table>来实现扩展和折叠行的效果。

这里有一个 JSFiddle 的最小示例：

https://jsfiddle.net/adlaws/mk4128dg/

基本上，您为表提供了一个树结构，如下所示：

[
    {
        columnA: 'John', columnB:'Smith', columnC:'75',
        children:
        [
            { columnA: 'Mary', columnB:'Symes', columnC:'46' },
            { columnA: 'Stan', columnB:'Jones', columnC:'42' },
            { columnA: 'Pat', columnB:'Black', columnC:'38' },
        ]
    }
]

然后，树被“展平”为可以通过该_flattenTreeStructure()方法显示在表中的行。在此过程中，行还使用一些额外的属性进行注释，以唯一标识行、存储行的深度（用于缩进）、行的父行（如果有）以及当前是否扩展该行。

完成此操作后，可以将展平的结构交给 ，因为<b-table>它只是一个行数组 - 这是通过computed 属性完成的flattenedTree。

现在的主要工作是通过_filterFunction()在表上提供自定义过滤的方法来完成的。expandedRowIndices它根据数据项的属性状态进行工作filterObj。

单击展开/折叠按钮时，行索引（在展平过程中填充的）将作为键插入，expandedRowIndices并用true或false指示其当前展开状态。

使用它_filterFunction()来“过滤掉”未展开的行，这会导致展开/折叠表中树的效果。

好的，所以它有效（耶！），但是......

• 它不像底座那么灵活<b-table>；<template slot="???">如果您想显示不同的数据列，您需要做一些工作并根据需要重新执行各列的部分。
• 如果您想实际使用过滤来过滤内容（例如，使用文本搜索），您需要扩展自定义过滤器功能以也考虑到这一点
• 对数据进行排序不是我为我的用例所做的事情，而且我不确定它在树结构的上下文中如何工作 - 维护树的父/子关系，同时更改周围行的顺序将很有趣，我怀疑对于那些不像我那么缺乏时间的人来说，这将是一个很好的挑战。;)

无论如何，我希望这对某人有用。我对 Vue.js 相当陌生，所以可能有更好的方法来解决这个问题，但它已经完成了我需要完成的工作。