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>

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

2 个答案: