Vue.jsを使用して、テーブルのセルの色を条件分岐で変更する方法

この記事の最終更新日: 2023年2月20日

例えば、テーブルのデータによって、セルの色を赤、黄色、緑に分岐させる場合などがあります。

この記事では、Vue.jsを使用してテーブルのセルの色を変更する方法を説明します。

手順は大きく以下の通りです。

テーブルに表示するデータをVue.jsのデータオブジェクトに定義する。
テーブルのセルの背景色を変更するためのスタイルを定義する。
テーブルの各行をループ処理し、各セルの背景色を条件に応じて設定する。

以下が、Vue.jsを使用してテーブルのセルの色を条件分岐で変更するサンプルコードになります。

<template>
  <table>
    <tr v-for="(item, index) in items" :key="index">
      <td :style="{'background-color': getBackgroundColor(item)}">{{ item.name }}</td>
      <td :style="{'background-color': getBackgroundColor(item)}">{{ item.age }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'John', age: 25 },
        { name: 'Jane', age: 35 },
        { name: 'Bob', age: 45 },
        { name: 'Alice', age: 15 }
      ]
    }
  },
  methods: {
    getBackgroundColor(item) {
      if (item.age > 40) {
        return 'red'
      } else if (item.age > 20) {
        return 'yellow'
      } else {
        return 'green'
      }
    }
  }
}
</script>

この例では、items配列に表示するテーブルのデータを定義しています。テーブルの各行はv-forディレクティブを使用してループし、各セルの背景色はgetBackgroundColor()メソッドで条件に応じて設定されます。

getBackgroundColor()メソッドでは、item.ageの値に基づいて、背景色を赤、黄色、緑に分岐させています。if-else文を使用して、条件に応じて背景色を返すようにしています。

このサンプルコードをベースに、テーブルのデータと背景色の条件分岐を自由にカスタマイズすることができます。

テンプレートの中で、条件分岐を使用することで、各セルの背景色を適切に設定することができます。また、条件に当てはまらない場合はスタイルを適用しないようにすることもできます。

ぜひ、参考にしてみてください。