Динамически переключать видимость строки таблицы - bootstrap-vue - PullRequest
Новая
       5

Динамически переключать видимость строки таблицы - bootstrap-vue

0 голосов
/ 03 декабря 2018

Есть ли способ динамически скрывать / показывать (отображать) строку таблицы в динамической таблице начальной загрузки?

В настоящее время я использую опору _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;
}

Есть идеи?

1 Ответ

0 голосов
/ 04 декабря 2018

Вот что я в итоге сделал:

  • создал 2 массива projects и old_projects
  • создал еще одну таблицу для old_projects ниже таблицы projects
  • добавил v-show="show_old_projects" к таблице old_projects
  • после извлечения данных, я перебрал его и организовал проекты в соответствующие массивы

Если кто-то можетПодумайте о более чистом способе сделать это, я открыт для предложений ... в противном случае это работает нормально.

...