Добавить стиль строки при заполнении данных, удалить при наведении мыши

Question

В настоящее время я использую b-таблицу Bootstrap Vue для отображения моих данных из базы данных. Я реализовал SignalR, где он будет автоматически обновлять / обновлять таблицу новыми данными, полученными с сервера.

Я хотел бы добавить какой-нибудь стиль выделения CSS или вариант строки когда новые данные будут заполнены в таблице, а затем удалите стиль из строки при наведении курсора мыши. В настоящее время я могу получать события в консоли, когда строка зависает.

Как мне добиться этой функциональности, используя Vue.js?

B-стол

<b-table
...
    :items="items"
    :fields="fields"
    @row-hovered="myRowHoverHandler"
...
> ... </b-table>

скрипт тега

props: {
...
    items: Array,
...
}

methods: {
    myRowHoverHandler(record, index) {
      console.log(this.items[index].id);
    },
...
}

Answer 1

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

Не забудьте использовать$set и $delete, чтобы поддержать реактивность Вью

https://codepen.io/Hiws/pen/WqKqdG

Answer 2

Вы можете использовать атрибут :tbody-tr-class в <b-table> для предоставления пользовательских классов строкам на основе текущего элемента.

Поскольку вы хотите внести изменения в событие blur строки, вы должны использовать @row-unhovered вместо @row-hovered.

Пример здесь: https://codesandbox.io/s/bootstrap-vue-sandbox-qfpc0