styling individual rows in a Vuetify data table

问题

Can I apply different styling for a specific row in a data table?

This is my code:

<v-data-table
          :headers="headers"
          :items="items"
          v-model="selected"
          :search="search"
          :no-data-text="mensagem"
          select-all
          :rows-per-page-text="linhasPorPagina">
          <template slot="items" slot-scope="props">
            <td>
              <v-checkbox
                primary
                hide-details
                v-model="props.selected"
              ></v-checkbox>
            </td>
            <td class="text-xs-left">{{ props.item.id }}</td>
            <td class="text-xs-left">{{ props.item.apresentante }}</td>    
        </v-data-table>

For example, I want to apply a red line when the Id > 4

回答1:

You can actually wrap your <td> elements within a <tr> element. Then you can use Vue style binding to determine whether you want classes applied or not.

<template>
  <tr v-bind:class="{'active-class-name': isActive(item)}">
    <td>Woo</td>
  </tr>
</template>

It renders out the tbody block with a row (tr) with applied class names and the child columns contained within.

回答2:

here is a codepen that produces a similar result to what you're looking for. It uses the style binding syntax referenced by Daniel's comment above.

https://codepen.io/lshapz/pen/jxmgyx

If you want the whole row to have a red line (or in my example a red background), you'll need to wrap the three td in a tr. If you just want it on the id cell, then you can add

<td class="text-xs-left" :style="{backgroundColor: (props.item.id > 4 ? 'red' : 'transparent' ) }">
 {{ props.item.id }}
</td>

回答3:

I was also trying to style rows in a vuetify data-table but the above answers didn't have everything I needed to make it work. Using Vuetify v2

I wanted to add a class to a row when a certain condition was met.

<v-data-table  
   :headers="myHeaders"
   :items="myItems"
>
  <template v-slot:item="props">
    <tr :class="{'my-class': props.item.current > props.item.total}">
      <td>{{props.item.current}}</td>
      <td>{{props.item.total}}</td>
    </tr>
  </template>
</v-data-table>

...
// js portion of the component (computed prop)

myItems() {
    return [
      {
        current: 101,
        total: 100
      },
      {
        current: 45,
        total: 100
      }
    ]
  }

来源：https://stackoverflow.com/questions/50136503/styling-individual-rows-in-a-vuetify-data-table

标签

Vue.js

vuetify.js