質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.91%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 247

suzuki999

score 4

やりたいこと

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);
    },
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/31 08:07

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

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

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る