Question

我们刚刚从引导程序转移到了Vuetify，但我正在为某些事情而苦苦挣扎。

我们（通过signalR）发送了一些更新，以更新作业列表，我希望能够定位已更改的作业，并在几秒钟内更改该特定作业的行颜色，以便操作员可以看到它的变化。

任何人都有关于如何在Vuetify v-data-table上执行此操作的指针

谢谢

Answer 1

我遇到了同样的问题。此解决方案有点粗糙，为时已晚，但可能会对其他人有所帮助。

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

在初始加载时收集ID列表。
将列表存储在组件的 data 中。
如果ID不在列表中（添加或编辑的行），请使用动态的：class 属性突出显示行

详细解决方案

1。在项目模板中使用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'）” 将使用 email 调用自定义方法 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上的 class 属性绑定到 newRecordClass 方法，每次表被调用更新。更好的检查方法是通过计算属性（https://vuejs.org/v2/guide/computed.html#Computed-Properties）。Vue仅在基础数据更改时才调用它-每次都会调用一个方法。

删除重点

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

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

Vuetify v-data-table更改行颜色几秒钟

1 个答案:

详细解决方案

删除重点