Bootstrap Vue Table - получение выборки из нескольких таблиц?

Я играл с Bootstrap Vue и таблицами.

Моя проблема заключается в следующем: у меня есть несколько таблиц, которые динамически загружаются на страницу, и пользователи должны иметь возможность выбирать элементы в каждой из этих таблиц. Затем все выбранные элементы следует объединить в один массив, который затем можно отобразить вверху страницы.

Пока что я добавил следующее в каждую из таблиц:

@row-selected="onRowSelected"

А также следующий метод:

methods: {

            onRowSelected(items) {

                items.forEach((item) => {
                    if (!this.selectedHashtags.includes(item.hashtag)) {
                        this.selectedHashtags.push(item.hashtag);
                    }
                })

            },
}

Проблема в том, что как только я отменяю выбор элемента из таблицы, он не удаляет его из массива, и я изо всех сил пытаюсь найти способ заставить эту работу работать.

К сожалению, событие @row-selected не отправляет идентификатор / ссылку таблицы, и я не могу найти способ получить все выбранные строки из каждой отдельной таблицы. Таким образом, я мог просто перебрать все this.$refs, получить все выбранные строки и связать их вместе при каждом щелчке по строке.

По сути, проще всего было бы, если бы существовал способ программно получить все выбранные элементы из таблицы?

Есть мысли о том, как лучше всего этого добиться?


javascript vue.js bootstrap-vue
person Pr4w    schedule 16.05.2020    source источник
comment
Собрать все выбранные строки для определенной таблицы в отдельный массив. Добавьте вычисляемую опору с именем allSelectedRows, в которой просто возвращает объединенный массив всего массива выбранных строк из всех таблиц.   -  person Anatoly    schedule 16.05.2020

Ответы (1)


arrow_upward
1
arrow_downward

Вероятно, самый простой способ - сохранить выбранное значение вместе с уникальным ключом каждой таблицы. Затем вы должны вызвать метод, например, с ключевым словом $event (см. документация):

@row-selected="onRowSelected('table1', $event)"

Вы также можете заключить в шаблон встроенную функцию, чтобы добиться того же результата:

@row-selected="(items) => onRowSelected('table1', items)"

Затем вы должны сохранить элементы в объекте в зависимости от ключа таблицы:

onRowSelected(tableKey, items) {
  // clears the list of this table key and overwrites it with the current entries
  this.selectedHashtags[tableKey] = items;
}

Затем вы можете определить вычисляемую переменную для получения всех выбранных хэштегов (по всем таблицам):

allSelectedHashtags() {
   const allSelectedHashtags = [];
   Object.keys(this.selectedHashtags).forEach(tableArray => {
     allSelectedHashtags.concat(tableArray);
   });
   return allSelectedHashtags;
}
person ssc-hrep3    schedule 16.05.2020
comment
Красивый! Потребовалась небольшая настройка, чтобы заставить его делать именно то, что я хотел, но встроенная функция в @ row-selected была именно тем, что мне нужно, спасибо! - person Pr4w; 16.05.2020