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

Question

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

我目前正在使用 _rowVariant 道具在该行上创建一个 class，这是可行的，但我无法弄清楚如何另外连接 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;
}

有什么想法吗？

Answer 1

这是我最后做的事情：

• 创建了 2 个数组 projects 和 old_projects
• 在 projects table
下方为 old_projects 创建了另一个 table
• 在 old_projects table
中添加了 v-show="show_old_projects"
• 获取数据后，我遍历它并将项目组织到各自的数组中

如果有人能想到一种更简洁的方法来执行此操作，我愿意接受建议...否则效果很好。