web-dev-qa-db-ja.com

Vuetifyデータテーブルの個々の行のスタイル設定

データテーブルの特定の行に異なるスタイルを適用できますか？

これは私のコードです：

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

たとえば、Id > 4

vue.jsvuetify.js
6
Fabio Ebner

実際には、_<td>_要素内で_<tr>_要素をラップできます。次に、Vueスタイルバインディングを使用して、クラスを適用するかどうかを決定できます。

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

tbodyブロックを、適用されたクラス名とその中に含まれる子列を含むrow (tr)でレンダリングします。

5
mellisdesigns

Vuetifyデータテーブルの行のスタイルを設定することも試みましたが、上記の回答には、それを機能させるために必要なものがすべて含まれていませんでした。 Vuetify v2を使用

特定の条件が満たされたときにクラスを行に追加したかった。

<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
      }
    ]
  }
1
Ju66ernaut

これは、探しているものと同様の結果を生成するコーデックペンです。上記のダニエルのコメントで参照されているスタイルバインディング構文を使用します。

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

行全体に赤い線（または私の例では赤い背景）が必要な場合は、3つのtdをtrでラップする必要があります。 idセルだけにしたい場合は、追加できます

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