v-data-tableにCSVをインポートし、空欄があった場合にはその項目の色を変える

Question

やりたいこと

Vuetifyのv-datatable で特定の行の色を変える。

環境

Vue.js 2.6.11
Vurtify 2.2.11

現状

v-data-table にヘッダ配列とアイテム配列を渡し表示しています。
アイテム配列の[shipment]欄に空欄があった場合にその行の色を変更したいのですが、やり方が分かりません。

現状試したことは、items配列に入れているworkers配列に!value.shipmentを条件に行の色を変更する処理を入れてみました。

うまく動かず、現状もがいている状態です。

Vue,Vuetifyに知見のある方、アドバイスのほどよろしくお願いします。

ソースコード

<template>
 
    <v-row align="center" fluid>
      <v-col cols="12">
        <v-data-table :headers="headers" :items="workers" class="elevation-1" hide-details="auto">
          <template slot="items" slot-scope="props">

          </template>
        </v-data-table>
      </v-col>
    </v-row>
  </v-container>
</template>


 methods: {
    //CSVをインポートさせる処理
    fileChange: function (e) {
      console.log(e);
      const file = e;
      const reader = new FileReader();
      const workers = [];

      const loadFunc = () => {
        const lines = reader.result.split("\n");
        lines.forEach((element) => {
          const workerData = element.split(",");
          if (workerData.length != 12) return;
          const worker = {
            TradeTerms: workerData[0],
            ShipmentBy: workerData[1],
            ShipTo: workerData[2],
            PO: workerData[3],
            CommodityDescription: workerData[4],
            Manufacturer: workerData[5],
            QTY: workerData[6],
            Unit: workerData[7],
            UnitPrice: workerData[8],
            TotalPrice: workerData[9],
            RequestETD: workerData[10],
            Remarks: workerData[11],
          };
          workers.push(worker);
        });
        this.workers = workers;

        //試したやり方（空白の行に対して色を指定）
        this.workers.forEach(function (value, index) {
          if (!value.ShipmentBy) {
            console.log(index);
            this.workers[index].style.color="red"
          }
        });
      };
      reader.onload = loadFunc;
      reader.readAsBinaryString(file);
    },

Answer 1

Vuetify.jsのv-data-tableコンポーネントには下記のように記述する機能はないようです。

this.workers[index].style.color="red"

描画する行のデザインをカスタマイズするにはitemスロットかbodyスロットを利用する方法があります。
以下はitemスロットを利用してShipmentByがnullのときに行を赤くする例です。

<v-data-table :headers="headers" :items="workers" class="elevation-1" hide-details="auto">
  <template v-slot:item="{ item }">
    <tr :style="{ 'background-color': item.ShipmentBy === null ? 'red' : '' }">
      <!-- 以下必要な数だけtdタグを記述 -->
      <td>{{ item.xxx }}</td>
      <td>{{ item.yyy }}</td>
    </tr>    
  </template>
</v-data-table>

Comments

[suzuki999]

サンプルの提供ありがとうございます。
Vuetify2.0の参考文献が少なく、つまづいていたので大変助かりました。

以下のソースを一部変更し問題なく動作しました。
変更前
:style="{ 'background-color': item.ShipmentBy === null ? 'red' : '' }">

変更後
:style="{'background-color': !item.TradeTerms ? 'red' : '' }"

CSVの空白が””と完全一致では拾えなかったようです。
これで多くの時間を使ってしまったので、解決の糸口を作っていただき感謝です。
ありがとうございました。ベストアンサーと高評価をさせて頂きます。