几秒钟后改变一行颜色

在这个例子中,我永久地改变行的颜色,直到页面重新加载。临时高亮显示的问题是,如果对表进行排序,则无法将该行放在表的可见部分—v-data-table将把它放在排序中属于它的位置,即使它不在视图中。

1. 在初始加载时收集ID列表。
2. 把名单放在里面 数据
3. 使用动态 :类 属性,用于在ID不在列表中时高亮显示行(添加或编辑的行)

详细解决方案

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>

将调用自定义方法 和 电子邮件 一排的。

2添加一个额外的数组来将id存储在要存储的数据中

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

三。在初始数据加载时填充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;
  }

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
}

绑定 TR to属性 新建记录类 https://vuejs.org/v2/guide/computed.html#Computed-Properties ). Vue只会在基础数据发生变化时调用它—无论何时都会调用一个方法。

删除突出显示

您可以修改 新建记录类

@bakersoft-你找到解决办法了吗?我想有更简单的方法来剥这只猫。