如果有重复的值
- 如果分数等于100，我想突出显示得分。
，我可以通过使用（item.score == 100）返回来做到这一点 'style-1';
- 如果名称具有相同的名字，我想突出显示名称。
您可以看到在Json甜点中，它们的名称相同，“冷冻” 两次。我想突出两者。
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/[email protected]/dist/vuetify.min.css'>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/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>- I would like to highlight the score if it is equal to 100.
By this I can do this by using if (item.score == 100) return
'style-1';
- I would like to highlight the names if they have the same name.
You can see that in json desserts, they have the same name "Frozen"
twice. I want to highlight both of them.
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/[email protected]/dist/vuetify.min.css'>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以使用 >功能并检查是否有1个以上的项目检查条件。
最后，您可以订购
如果将最重要的Hilight放在功能的顶部You can use the Array#Filter function and check if there is more than 1 items that check the condition.
Finally, you can order your
ifto put the most important hilight at the top of the function