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

我（认为）我遇到了同样的问题，我想出了一个解决方案，该解决方案利用了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>，因为它只是一个行数组-这是通过compute d属性flattenedTree完成的。

现在的主要工作是通过_filterFunction()方法完成的，该方法提供了对表的自定义过滤。它可以处理expandedRowIndices数据项的filterObj属性的状态。

单击扩展/折叠按钮时，将行索引（在展平过程中填充）作为关键字插入到expandedRowIndices中，其中true或false表示其当前扩展状态。

_filterFunction()使用它来“过滤”未扩展的行，从而导致扩展/折叠表中树的效果。

好的，这样就可以了（是的！），但是...

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

无论如何，我希望这对某人有用。我是Vue.js的新手，所以也许有更好的方法可以解决此问题，但这已经完成了我需要完成的工作。

Answer 2

听起来像您可以使用行详细信息插槽的声音

如果您有选择地希望显示其他记录信息（例如未在字段定义数组中指定的列），则可以使用作用域为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切换扩展表行

2 个答案: