vue.js - 填充数据时添加行样式，鼠标悬停时删除

我目前正在使用 Bootstrap Vue 的 b-table 来显示数据库中的数据。我已经实现了 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);
    },
...
}

标签： vue.jsbootstrap-vue

当项目更新时，您只需在_rowVariant已更新的项目上设置，然后在悬停时再次将其从项目中删除，如下面的代码笔所示。

记住使用$set并$delete保持 Vue 的响应性快乐