如何解决Usng Vuetify v-data-table如何设置基于芯片的颜色以及值和项目
我想使用item值和items id来设置v-data-table中某个项目的值的芯片颜色。所以我只想在id为“ Cl2”的情况下将0.5以下的值设置为红色。 //////////////////////////////////////////////////// //////////////////////////////////////////////////// //////////////////////////////////////////////////// ////////////////////////////// [在此处输入图片描述] [1] 这是我的表格和代码： [1]：https：//i.stack.imgur.com/Sp8DQ.jpg
<template>
<v-data-table
:headers="headers"
:items="parameters"
class="elevation-1"
hide-default-footer
calculate-widths
dense
>
<template v-slot:top>
<v-toolbar flat color="white">
<v-toolbar-title>Parameter Input {{ scanSite }} </v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
<v-dialog v-model="dialog" persistent>
<v-card
max-width="315px"
max-height="240px"
style="position: absolute; top: 90px; left: 30px; right: 30px;"
>
<v-card-title>
<span class="">{{ editedItem.name }} - Enter/Edit Values </span>
</v-card-title>
<v-card-text class="card-text py-0 my-0">
<v-container>
<v-row class="row py-0">
<v-col cols="5">
<v-text-field
v-model="editedItem.value"
label="Value"
></v-text-field>
</v-col>
<v-col cols="5">
<v-text-field
v-model="editedItem.sid"
label="Save ID"
></v-text-field>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="close">Cancel</v-btn>
<v-btn color="blue darken-1" text @click="save">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:[`item.actions`]="{ item }">
<v-icon small class="mr-2" @click="editItem(item)">
mdi-pencil
</v-icon>
<v-icon small class="mr-2" @click="addItem(item)">
mdi-plus
</v-icon>
</template>
<template v-slot:[`item.analyse`]="{ item }">
<v-simple-checkbox
color="green"
v-model="item.analyse"
></v-simple-checkbox>
</template>
<template v-slot:[`item.value`]="{ item }">
<v-chip :color="getColor(item.value)" small dark>{{ item.value }}</v-chip>
</template>
</v-data-table>
</template>
<script>
import { mapState } from "vuex";
export default {
data() {
return {
scanSite: "",dialog: false,selected: [],editedItem: {
name: "",value: 0,sid: 0
}
};
},computed: {
...mapState(["scanSite","headers","parameters","sites"])
},methods: {
editItem(item) {
this.editedIndex = this.parameters.indexOf(item);
this.editedItem = Object.assign({},item);
this.dialog = true;
},save() {
Object.assign(this.parameters[this.editedIndex],this.editedItem);
this.dialog = false;
},close() {
this.dialog = false;
},getColor(value,id) {
console.log(value,id);
if (value > 0.5 && id == "Cl2") return "red";
else if (value > 10) return "orange";
else return "green";
},addItem(item) {
this.editedIndex = this.parameters.indexOf(item);
this.editedItem = Object.assign({},item);
this.parameters.push(this.editedItem);
this.dialog = true;
}
}
};
</script>
解决方法
我认为您在调用getColor()函数时需要同时设置两个参数设置者，
<v-chip :color="getColor(item.value,item.id)" small dark>{{ item.value }}</v-chip>
或传递整个项目对象并在getColor()函数中进行管理
<v-chip :color="getColor(item)" small dark>{{ item.value }}</v-chip>
...
getColor(item) {
if (item.value > 0.5 && item.id == "Cl2") return "red";
else if (item.value > 10) return "orange";
else return "green";
},版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。