Как настроить навешивание события выбора строки таблицы из bootstrap vue?

Question

[Руслан Дасаев]

Здравствуйте. Интересует, можно ли в bootstrap-vue компоненте b-table https://bootstrap-vue.js.org/docs/components/table... (смотри интерактивную таблицу) настроить ее таким образом, чтобы select можно было делать только на определенные строки, например у которых поле errors cодержит пустой массив? Если нужно писать кастомный код, дайте плиз наводку, каким способом это можно реализовать.
Спасибо за внимание.

Answer 1

[coderisimo]

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

onRowSelected(items) {
        this.selected = items
      },

где вы можете перед this.selected = items фильтровать items (это же массив!) и оставлять в нем только те строки, которые ИМЕЮТ ПРАВО быть выделенными.

Comments

[Руслан Дасаев]

Вот результат

[coderisimo]

ну и ? )) Где ваш код? Что означает "с ошибкой без" ? Сделайте codepen песочницу.

[Руслан Дасаев]

Вот код

onRowSelected(items) {
			let testSelected = items.filter(x => {
				let findError;
				if (!x.errors.length) {
					findError = false;
				} else {
					for (let b = 0; b < x.errors.length; b++) {
						if (x.errors[b].text === 'Ошибка обработки с сервера') {
							findError = true;
							break;
						} else if (x.errors[b].text === 'Рейс не найден') {
							findError = true;
							break;
						} else {
							findError = false;
						}
					}
				}
				return findError === false;
			});
			this.selected = testSelected;
		},

Он работает, иначе при выборе 2х строк таблицы было бы написано - selected: Array[2]
Где без - строка попавшая в selected, c ошибкой - нет.

[coderisimo]

Пришлось залезть в доку ))))

<b-table
      ref="selectableTable"
      selectable
      :select-mode="selectMode"
      :items="items"
      :fields="fields"
      @row-clicked="onRowClicked" <!--   вот здесь наш обработчик -->
      responsive="sm"
    >

onRowClicked(item, index, event) {
    if (!item.isActive) {
        this.$nextTick(function() {
            this.$refs.selectableTable.unselectRow(index);
        });
    }

},

ясно, что здесь делаем ? ))

[fan92rus]

Тут мы проверяем если текущий элемент не кликабельный то сбрость выбор.

[coderisimo]

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

[Руслан Дасаев]

coderisimo, Все работает, спасибо. Перешлю донат, если скинете реквизиты.

[coderisimo]

Руслан Дасаев, Руслан, удачи!

[Руслан Дасаев]

coderisimo, Спасибо!