根据 Vue 中的数据更改表格单元格的背景

Question

我目前正在尝试在 vue 项目中更改我的表格中某些单元格的颜色。我在文档和其他一些在线资源上阅读了有关类和样式绑定的信息，但我无法得到我想要的工作。

我有一个表格，其中填充了来自 firestore 的数据，并根据我想要更改某些单元格颜色的数据。第一个单元格是显示人“等级”的单元格，如果该人的等级为“金星”，我想给.gold-star类，如果是“银星”，我想给.silver-star，如果是.bronze-star “青铜星”。

第二个单元格将是显示人员总分的单元格，此单元格将基于一系列基于人员等级及其总分的条件，例如，如果人员等级为“铜星”并且人员有>50 点，我想将.change-rank 类添加到总单元格中，这样我就知道是时候改变了。不知道我有没有说清楚。

这是到目前为止我的表格组件的代码（我对其进行了一些修剪以使其更易于阅读）。

<template>
  <div>
    <v-snackbar v-model="snackbar">
      <span>Player Added!</span>
      <v-btn color="blue" text @click="snackbar = false">Close</v-btn>
    </v-snackbar>
    <h3 class="font-weight-medium text-center pa-3 ma-3 display-1">Member List</h3>
    <template v-if="isMember || isAdmin">
      <v-simple-table fixed-header height="70vh">
        <template v-slot:default>
          <thead>
            <tr>
              <th class="text-left title">Name</th>
              <th class="text-left title">Rank</th>
              <th class="text-left title">Total</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(member, index) in members" :key="index">
              <td>
                {{member.name}}
              </td>
              <td>{{member.rank}}</td>
              <td>{{member.total}}</td>
            </tr>
          </tbody>
        </template>
</v-simple-table>
</template>

</div>
</template>

<script>
  import {
    db,
    fv,
    tstp
  } from "../data/firebaseInit";
  import firebase from "firebase/app";
  import Popup from "../components/Popup";
  export default {
    components: {
      Popup
    },
    data() {
      return {
        isAdmin: false,
        isMember: false,
        snackbar: false,
        members: []
      };
    },
    created() {
      this.fetchDb();
    },
    methods: {
      fetchDb() {
        db.collection("members")
          .orderBy("name")
          .onSnapshot(snap => {
            const members = [];
            snap.forEach(doc => {
              let newPlayer = doc.data();
              newPlayer.id = doc.id;
              members.push(newPlayer);
            });
            this.members = members;
          });
      }
    }
  };
</script>

<style scoped>
  h3 {
    text-decoration: underline;
    color: #37474f;
  }

  .gold-star {
    background-color: #ffee58;
  }

  .silver-star {
    background-color: #BDBDBD;
  }

  .bronze-star {
    background-color: #cd7f32;
  }

  .change-rank {
    background-color: #00C853;
  }
</style>

Answer 1

您需要做的就是有条件地为循环中的每个元素分配一个类：

<tr 
  v-for="(member, index) in members" 
  :key="index" 
  :class="{
    'gold-star': member.rank === 'Gold star',
    'silver-star': member.rank === 'Silver star',
    'bronze-star': member.rank === 'Bronze star',
  }"
>
...

对积分做同样的事情：'change-rank': member.total > 50

您还可以将此代码移至method 并让您的 HTML 更整洁：

<tr 
  v-for="(member, index) in members" 
  :key="index" 
  :class="getTableClasses(member)"
>

...

methods: {
  getTableClasses(member) { 
   let color = member.rank.toLowerCase().replace(' ', '-')
   let changeRank = member.total > 50 ? 'change-rank' : ''
   return `${color} ${changeRank}`
  }
}

Answer 2

您可以根据输入应用您的课程。只需创建一个包含类和值的对象，如下所示

const classes = {
  'Gold star': 'gold-star',
  'Silver star': 'silver-star',
  'Bronze star': 'bronze-star'
};

当您进行循环时，只需在上面的对象中传递您的排名值，因此它将根据排名返回类名。如下所示

<td :class="classe[item.rank]">{{ item.rank }}</td>

您可以在这里查看工作 Codepen 演示。

代码片段

<v-simple-table>
  <template v-slot:default>
        <thead>
          <tr>
            <th class="text-left title">Name</th>
            <th class="text-left title">Rank</th>
            <th class="text-left title">Total</th>
          </tr>
        </thead>
        <tbody>
         <tr v-for="(member, index) in members" :key="index">
              <td>{{member.name}}</td>
              <td :class="classe[item.rank]">{{ item.rank }}</td>
              <td>{{member.total}}</td>
            </tr>
        </tbody>
      </template>
</v-simple-table>