1
  • テーブル内のいずれかのフィールドの値に基づいて v-data-table の行に色を付けようとしています。
  • ここや他の場所で提供されているすべてのソリューションを試し、さらにいくつか試してみました。
  • 現在のバージョンの Vuetify (2.3.9) を実行しています
  • すべてをリロードし、ブラウザのキャッシュと Cookie をクリアしました。
  • スロットを使用して、または使用せずに試しました。
  • 私のアプリケーションは v-app でラップされています

== スロットなし ==

      <v-data-table 
        :items-per-page="50" 
        :headers="headers" 
        :items="jobs" 
        :height="600" 
        :search="search" 
        :hide-default-footer="true" 
        :item-key="jobs.JobID" 
        :item-class="row_class" 
        mobile-breakpoint="300"  
        no-data-text="No jobs today!" 
        dense 
        > 
      </v-data-table>  

methods: {
    row_class (item) { return "jobGreen" }
         } 

.jobGreen {  
   background-color: lightgreen;
          }

結果：

  • クラスは適用されません。
  • item-class="jobGreen" (つまり、リアクティブではない) の使用も失敗します
  • jobGreen クラスを v-data-table に適用すると (つまり、class='jobGreen')、期待どおりに動作します

== スロットの使用 ==

(簡体字)

<v-data-table>
   <template v-slot:item="{item}">
      <tr :class="row_class(item)">
         <td>
            {{ item.JobNumber }}
         </td>
      </tr>
   </template>
</v-data-table>

methods: {
    row_class (item) { return "jobGreen" }
      }

OK、これは機能しますが、テーブルの最初の行にはクラスが適用されていません! 別のレコードが上になるようにテーブルを並べ替えても状況は変わらないため、データとは関係ありません。このメソッドは、テーブルの各行に対して呼び出されています。

4

2 に答える 2

0

私は同じ問題を抱えていました！これは、私にとって機能しない:item-classを回避するものです: (私は 1 つのdefRowをフォーマットしたかっただけです)

<template>
<v-data-table
  :headers="headersForTable"
  :items="chosenTableData"
>
<template v-slot:item="{item}">
  <tr :class="isDefRow(item) ? 'defRow' : ''" @click="rowInTableClicked(item) >
    <td v-for="(head,i) in headersForTable" :key="i">
      {{ item[head.value] }}
    </td>
  </tr>
</template>
</v-data-table>
</template>


<script lang="ts">

  isDefRow(row: any): boolean {
    // ...
  }

  get headersForTable() {
    // returns the array of header objects
  }

  get chosenTableData() {
    // returns the data array
  }

</script>

<style scoped>
.defRow {
  font-weight: bold;
}
</style>

@click="rowInTableClicked(item)それ以外の場合と同じ動作をするわけではありません@click:row="rowInTableClicked"!

于 2021-03-17T14:09:28.627 に答える