Vuetify - 如何在 v-data-table 中点击时突出显示行

Question

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

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

例如，在我的情况下，如果我对列进行排序，则数据将来自 API，并且 v-data-table 中的数据将使用排序后的数据进行刷新，在这种情况下，selected每次都很难维护该标志当数据发生变化时。有没有其他方法可以突出显示选定的行？

Answer 1

<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

Answer 2

您的解决方案不起作用，因为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