bootstrap-vue 切换扩展表行

Posted 2023-02-22

【中文标题】bootstrap-vue 切换扩展表行

【英文标题】：bootstrap-vue toggle expand table row

【发布时间】：2019-07-01 17:16:26

【问题描述】：

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

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

在下面的 sn-p 中，您将看到我正在尝试的内容。问题是我似乎无法让扩展数据跨越表中的列数。我尝试添加<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>`

【问题讨论】：

听起来你可以使用内置的row-details 来实现这一点？

您可以查看this example

@StevenB 是正确的。 row-details 是您最好的选择，它是内置的，因此使用它需要最少的代码。

【参考方案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 的文档中有一个很好的示例

【参考方案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() 方法完成的，该方法提供了对表格的自定义过滤。它适用于filterObj 数据项的expandedRowIndices 属性的状态。

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

_filterFunction() 使用它来“过滤掉”未展开的行，从而产生展开/折叠表中树的效果。

好的，所以它可以工作（耶！），但是......

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

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

【讨论】：

链接已损坏。

啊……是的。我将尝试从原始项目中寻找源代码，看看我是否可以重新创建示例（尽管现在差不多是两年前了，该项目有点原型，现在可能已经被分箱了）。感谢您的提醒，@LucianoBrum