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

Question

是否可以动态隐藏/显示（显示）动态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;
}

有什么想法吗？

Answer 1

这就是我最终要做的：

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

如果有人可以想到一种更清洁的方法，那么我可以提出建议...否则就可以正常工作。