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";
},