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

Question

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

我有一个表格，其中填充了来自 firestore 的数据，我想根据这些数据更改某些单元格的颜色。第一个单元格是显示人员“等级”的单元格，如果此人的等级为“金星”，我想给 .gold-star 类，.silver -star 如果是“Silver Star”，.bronze-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

您还可以将此代码移至方法 并使您的 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}`
  }
}