0

我想同时使用项目值和项目 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>
4

1 回答 1

0

我认为你需要在调用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";
},
于 2020-08-28T15:05:58.800 回答