基于Vue中数据的表格单元更改背景
基于Vue中数据的表格单元更改背景
提问于 2019-12-16 12:01:31
目前，我正试图在vue项目中更改表中某些单元格的颜色。我在网上读到了关于类和样式绑定的文档和其他一些资源，但是我无法得到我想要的工作。
我有一个表格，里面装满了来自火药库的数据，基于数据，我想要改变一些单元格的颜色。第一个单元格是显示人“级别”的单元格，如果该人的等级为“金星”，.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>回答 2
Stack Overflow用户
回答已采纳
发布于 2019-12-16 12:17:26
您所需要做的就是有条件地为循环中的每个元素分配一个类：
<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}`
}
}Stack Overflow用户
发布于 2019-12-16 12:37:48
您可以根据输入应用您的类。只需创建一个包含类和值的对象，如下所示
const classes = {
'Gold star': 'gold-star',
'Silver star': 'silver-star',
'Bronze star': 'bronze-star'
};当你做循环时，只是在上面的对象中传递你的秩值，所以它将根据秩返回类名。就像下面
<td :class="classe[item.rank]">{{ item.rank }}</td>您可以在这里查看工作的科德芬演示。
代码片段
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59356246
复制相关文章
相似问题
腾讯云开发者
