Vuetify v-data-table 如果有重复值则高亮行

Question

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

By this I can do this by using if (item.score == 100) return 'style-1';

如果名称相同，我想突出显示名称。

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/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>

Vuetify v-data-table 如果有重复值则高亮行

Vuetify v-data-table highlight row if there is duplicate value

vue.js

vuetify.js

vuetify-datatable