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

【问题标题】：Dynamically toggle visibility of table row - bootstrap-vue动态切换表行的可见性 - 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(...)方法

标签： vue.js bootstrap-vue

【解决方案1】：

这是我最终做的：

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

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

【讨论】：