vuetify.js - Vuetify v-data-table 改变一行颜色几秒钟

Question

我们刚刚从 Bootstrap 转移到 Vuetify，但我正在努力解决一些问题。

我们发送了一些更新(通过 signalR)更新作业列表，我希望能够定位已更改的作业并更改该特定作业的行颜色几秒钟，以便运算符(operator)可以看到它改变了。

有没有人知道我们如何在 Vuetify v-data-table 上做到这一点

谢谢

Answer 1

我遇到了同样的问题。这个解决方案有点粗糙，有点太晚了，但可能会帮助其他人。

在此示例中，我永久更改行的颜色，直到页面重新加载。临时突出显示的问题是，如果表已排序，则无法将行放在表的可见部分 - v-data-table 会将其放在它所属的排序位置，即使它不在看法。

收集初始加载时的 ID 列表。

将列表存储在组件的内部数据中。

如果 ID 不在列表中(添加或编辑的行)，使用动态 :class 属性突出显示行

详细解决方案

1.在items模板中使用TR添加条件类。

<template slot="items" slot-scope="props">
    <tr :class="newRecordClass(props.item.email, 'success')">
      <td class="text-xs-center" >{{ props.item.email }}</td>

:class="newRecordClass(props.item.email, 'success')"将调用自定义方法 newRecordClass 并将电子邮件作为行的 ID。

2. 添加一个额外的数组来存储数据中的 ID 以存储

 data: {
    hydrated: false,
    originalEmails: [], <--- ID = email in my case

3. 在初始数据加载时填充 ID 列表

  update(data) {
    data.hydrated = true; // data loaded flag
    let dataCombined = Object.assign(this.data, data); // copy response data into the instance
    if (dataCombined.originalEmails.length == 0 ) {
      // collect all emails on the first load
      dataCombined.originalEmails = dataCombined.listDeviceUsers.items.map( item => item.email)
    }
    return dataCombined;
  }

现在实例 data.originalEmails 具有最初加载的 ID 列表。不会有任何新增内容。

4. 增加检测ID是否在列表中的方法

newRecordClass(email, cssClass) {
  // Returns a class name for rows that were added after the initial load of the table
  if (email == "" || this.data.originalEmails.length==0) return "" // initial loading of the table - no data yet
  if (this.data.originalEmails.indexOf(email) < 0 ) return cssClass
}

:class="newRecordClass(..."将 TR 上的类属性绑定(bind)到 newRecordClass 方法，并在每次更新表时调用。进行检查的更好方法是通过计算属性 ( https://vuejs.org/v2/guide/computed.html#Computed-Properties)。Vue 会仅在基础数据更改时调用它 - 每次都会调用一个方法。

删除突出显示

您可以修改 newRecordClass 方法以在延迟将颜色更改为正常后用新 ID 更新 ID 列表。

@bakersoft - 你找到解决方案了吗？我怀疑有一种更简单的方法可以给这只猫剥皮。