动态切换表行的可见性 - bootstrap-vue

Posted 2023-02-22

【中文标题】动态切换表行的可见性 - bootstrap-vue

【英文标题】：Dynamically toggle visibility of table row - bootstrap-vue

【发布时间】：2019-05-04 23:28:09

【问题描述】：

有没有办法在动态 bootstrap-vue 表格中动态隐藏/显示（显示）表格行？

我目前正在使用_rowVariant 属性在行上创建一个类，这正在工作，但我无法弄清楚如何将show_old_projects 值另外连接到行的显示...因为行是动态添加的。

<b-form-checkbox v-model="show_old_projects" value="true" unchecked-value="false">
  Show old projects
</b-form-checkbox>

<b-table :fields="fields" :items="projects" :filter="filter"></table>

...

validateProjects() 
  for (const project of this.projects)
    if (project.end_date < this.date) 
      project._rowVariant = 'muted'; 
    
  


...

.table-muted 
  @extend .text-muted;

有什么想法吗？

【问题讨论】：

bootstrap-vue docs

您可以只观察 show_old_projects 值并在它发生变化时 validateProjects() 吗？如果要从表中完全删除该行，可以从 items 数组中删除项目。

谢谢大佬，你帮我扫清了迷雾！

在将项目数据传递给b-table 之前对其进行预过滤将是您最好的选择。你可以使用javascript内置的Array.prototype.filter(...)方法

【参考方案1】：

这是我最终做的：

创建了 2 个数组 projects 和 old_projects 在projects 表下方为old_projects 创建了另一个表 在old_projects 表中添加了v-show="show_old_projects" 获取数据后，我对其进行迭代并将项目组织到各自的数组中

如果有人能想到一种更清洁的方法来做到这一点，我愿意接受建议......否则这工作正常。