小编Var*_*ron的帖子

我使用 av-data-table来管理电子邮件。用户可以单击一行，然后会出现一个包含电子邮件详细信息的弹出窗口。

我想要什么：
我希望在单击这些行后将行标记为“已读”（因此 css 粗体/非粗体）。

问题：
我已经在这里找到了一些示例（但仅适用于较旧的 Vuetify 版本）：Vuetify - How to highlight row on click in v-data-table

这个例子（以及我发现的所有其他例子）使用扩展代码v-data-table- 例如：

<v-data-table :headers="headers" :items="desserts" class="elevation-1">
  <template v-slot:items="props">
    <tr @click="activerow(props.item)" :class="{'primary': props.item.id===selectedId}">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
    </tr>
  </template>
</v-data-table>

所以扩展代码是：

<template v-slot:items="props">
  <tr @click="activerow(props.item)" :class="{'primary': props.item.id===selectedId}">
    <td>{{ props.item.name }}</td>
    <td class="text-xs-right">{{ props.item.calories }}</td>
    <td class="text-xs-right">{{ props.item.fat }}</td> …