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

Question

我目前正在使用 Bootstrap Vue 的 b-table 来显示我来自数据库的数据。我实现了 SignalR，它将自动 update/refresh table 以及从服务器接收到的新数据。

我想添加一些亮点 css 样式或 row variant 当新数据填充到 table 时，然后从 mouseover/hover 上的行中删除样式。目前，当一行悬停时，我可以在控制台中接收事件。

如何使用 Vue.js 实现此功能？

b-table

<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

您可以在 <b-table> 上使用 :tbody-tr-class 属性，根据当前项目为行提供自定义类。

由于您想对行的 blur 事件进行更改，您应该使用 @row-unhovered 而不是 @row-hovered。

Answer 2

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

记得使用 $set 和 $delete 来保持 Vue 的 Reactivity 快乐

Add row styling when data populated, remove on mouse hover