如果v-data-table中存在重复的值，则验证其高亮行

Question

1. 我想突出显示分数，如果它等于100。

我可以通过使用if (item。得分== 100)返回形式1,

2. 我想突出显示名称，如果他们有相同的名称

你可以看到在json中，它们有相同的名称"Frozen"两次。我想把它们都高亮显示。

new Vue({
el: '#app',
vuetify: new Vuetify(),
methods: {
customRowClass(item) {

if (item.score == 100) return 'style-1';

// How to highlight duplicate names? 
// if (item.name == item.name) return 'style-2';
},
},
data () {
return  {
headers: [],
desserts: [
{
name: "Frozen",
score: 66,
},
{
name: "Tom",
score: 100,
},
{
name: "Eclair",
score: 100,
},
{
name: "Frozen",
score: 89,
},
]
}
},
})

.style-1 {
background-color: rgb(215, 215, 44) !important;
}
.style-2 {
background-color: rgb(114, 114, 67) !important;
}

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vuetify@2.3.4/dist/vuetify.min.css'>
<script src='https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vuetify@2.3.4/dist/vuetify.min.js'></script>

<div id="app">
<v-data-table
:headers="headers"
:items="desserts"
:item-class="customRowClass"
>
<template #item="{ item }">
<tr :class="customRowClass(item)">
<td>{{ item.name }}</td>
<td>{{ item.score }}</td>
</tr>
</template>
</v-data-table>
</div>

Answer 1

您可以使用array# Filter函数并检查是否有多于1个项目检查条件

this.desserts.filter(x => x.name === item.name).length > 1

最后，您可以命令您的if将最重要的亮点放在功能的顶部

new Vue({
el: '#app',
vuetify: new Vuetify(),
methods: {
customRowClass(item) {
if (item.score == 100) return 'style-1';
if (this.desserts.filter(x => x.name === item.name).length > 1) return "style-2"
},
},
data () {
return  {
headers: [],
desserts: [
{
name: "Frozen",
score: 66,
},
{
name: "Tom",
score: 100,
},
{
name: "Eclair",
score: 100,
},
{
name: "Frozen",
score: 89,
},
]
}
},
})

.style-1 {
background-color: rgb(215, 215, 44) !important;
}
.style-2 {
background-color: rgb(114, 114, 67) !important;
}

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vuetify@2.3.4/dist/vuetify.min.css'>
<script src='https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vuetify@2.3.4/dist/vuetify.min.js'></script>

<div id="app">
<v-data-table
:headers="headers"
:items="desserts"
:item-class="customRowClass"
>
<template #item="{ item }">
<tr :class="customRowClass(item)">
<td>{{ item.name }}</td>
<td>{{ item.score }}</td>
</tr>
</template>
</v-data-table>
</div>