Vuetify - 如何在 v-data-table 中点击时突出显示行 [英] Vuetify - How to highlight row on click in v-data-table

问题描述

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

How to highlight the selected row in v-data-table? i tried to modified the data by adding flag variable selected in the Example

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

In the above example click on a row will be highlighted by adding class called primary. If it is a static data it is working fine, but if it is dynamic data like getting data from API, the data in the data table will always be refreshed, if i change the pagination and sort and all.

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

For example, in my case, if i sort the column the data will come from the API and data in the v-data-table will be refreshed with sorted data, in this case it is very hard to maintain that selected flag each and every time when ever the data changes. Is there any other way to highlight a selected row?

推荐答案

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

Your solution does not work because the selected property is added to the data when you click on a row, but when data is reloaded then the data without a selected property replaces the old data.

所以要让它发挥作用:
- 为甜点列表中的每个项目添加一个 id 字段
- 将 selectedId 与默认值 -1 添加到您的数据
- 将方法 activerow 中的代码行更改为 this.selectedId = item.id;
- 将中的class属性改为:class="{'primary': props.item.id===selectedId}"

So to make it work:
- add an id field to each item in the list of desserts
- add an selectedId with default value -1 to your data
- change the line of code in method activerow to this.selectedId = item.id;
- change the class attribute in the <tr> to :class="{'primary': props.item.id===selectedId}"

如果在重新加载时仅您的甜点列表发生了变化，并且新列表包含与之前选择的 ID 相同的项目，则应该选择同一行.

If on reload only your list of desserts changes, and the new list contains an item with the same id as selected before, then the same row should become selected.

我分叉了 codepen 示例来向您展示这是如何工作的:
https://codepen.io/anon/pen/PrWjxQ?editors=1010

I forked the codepen example to show you how this works:
https://codepen.io/anon/pen/PrWjxQ?editors=1010

这篇关于Vuetify - 如何在 v-data-table 中点击时突出显示行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！