Vuetify - 如何突出显示单击 v-data-table 中的行

Question

如何突出显示 v-data-table 中的选定行？我试图通过在 示例 中添加标志变量 selected 来修改数据

在上面的示例中，单击一行将通过添加名为 primary 的类来突出显示。如果它是静态数据，它工作正常，但如果它是动态数据，比如从 API 获取数据，数据表中的数据将始终被刷新，如果我更改分页和排序等等。

例如，在我的例子中，如果我对列进行排序，数据将来自 API，v-data-table 中的数据将使用排序后的数据进行刷新，在这种情况下，很难维护 selected 标记每次数据更改时。还有其他方法可以突出显示选定的行吗？

原文由 Sam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的解决方案不起作用，因为 selected 属性会在您单击一行时添加到数据中，但是当重新加载数据时，没有 selected 属性的数据将替换旧数据。

所以要让它工作：

- 为甜点列表中的每个项目添加一个 id 字段

- 添加一个 selectedId 默认值-1到你的数据

- 将方法中的代码行 activerow 更改为 this.selectedId = item.id;

- 将 <tr> 中的类属性更改为 :class="{'primary': props.item.id===selectedId}"

如果在重新加载时 只有 你的甜点列表发生变化，并且新列表包含一个与之前选择的 id 相同的项目，那么同一行应该被选中。

我分叉了 codepen 示例来向您展示它是如何工作的：

https://codepen.io/anon/pen/PrWjxQ?editors=1010

原文由 Sander_P 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

<v-data-table @click:row="rowClick" item-key="name" single-select ...

methods: {
    rowClick: function (item, row) {
      row.select(true);
      //item.name - selected id
    }
}

<style>
  tr.v-data-table__selected {
    background: #7d92f5 !important;
  }
</style>

或者

<style scoped>
  /deep/ tr.v-data-table__selected {
    background: #7d92f5 !important;
  }
</style>

示例 https://codepen.io/nicolai-nikolai/pen/GRgLpNY

原文由 Nicolai Nikolai 发布，翻译遵循 CC BY-SA 4.0 许可协议