Как изменить цвет всей строки bootstrap vue table?

Question

[qwentry]

День добрый.
Подскажите пожалуйста, как выделить всю строку, то есть сделать ее danger?

Есть таблица:

<b-table
      :items="items"
      :fields="fields"
      :sticky-header="stickyHeader"
      head-variant="light"
      class="mt-5 mx-3"
    >
    </b-table>

А так же field & items

stickyHeader: true,

      items: [
        { login: 'user1', password: 'pass1', is_blocked: true, },
        { login: 'user2', password: 'pass2', is_blocked: false},
      ],
      fields: [
        {
          key: 'login',
          label: 'Login',
        },
        {
          key: 'password',
          label: 'Password',
        },
        {
          key: 'is_blocked',
          label: 'Blocked',
          formatter: (value, key, item) => {
            return value ? 'Yes' : 'No'
          },
          sortable: true,
        },
      ],

И собственно вопрос вот в чем. Если в items добавить _rowVariant: 'danger' то я выделяю собственно всю строку, но это items прилетает с бэка и соответственно там не будет этой строки.
Как мне сделать так, что бы если is_blocked true, то срока была бы красной?

Один из вариантов:
this.items.forEach(function(obj){if(obj.is_blocked === true){ obj._rowVariant = "danger"; } });

Но есть ли еще какие варианты?

Answer 1

[0xD34F]

methods: {
  trClass: rowData => rowData.is_blocked && 'table-danger',
  ...

<b-table
  :tbody-tr-class="trClass"
  ...

Comments

[qwentry]

Спасибо.