从子组件更改事件 v-data-table 行的背景

Question

我的父组件中有一个扩展数据表，扩展行中有一个带有按钮的子组件。当我单击子组件内的按钮时，我想更改关联行的背景颜色。我不确定如何定位该行以在事件中添加 css 类。

ScanGrid（父）：

    <template>
      <v-flex v-if="items.length === 0">
        <ScanAdd @selectBatch="showScan" />
      </v-flex>
      <v-card v-else class="ma-5">
        <v-card-text>
          <v-layout align-center>
            <v-data-table
              :headers="headers"
              :items="items"
              item-key="StorageName"
              show-expand
              single-expand
              :expanded="expanded"
              hide-default-footer
              @click:row="clickedRow"
            >
              <template
                @isDeleted="deleteRow"
                v-if="groupBy === 'barCode'"
                v-slot:expanded-item="{ item }"
              >
                <td :colspan="12">
                  <ScanGridCode :item="item" />
                </td>
              </template>
              <template v-else v-slot:expanded-item="{ item }">
                <td :colspan="12">
                  <ScanGridDef :item="item" />
                </td>
              </template>
            </v-data-table>
          </v-layout>
        </v-card-text>
      </v-card>
    </template>

    <script>
    import { API } from "@/api";
    import ScanAdd from "./ScanAdd";
    import ScanGridCode from "./ScanGridCode";
    import ScanGridDef from "./ScanGridDef";
    export default {
      name: "ScanGrid",
      props: {
        items: {
          type: Array,
          required: true
        }
      },
      components: {
        ScanGridCode,
        ScanGridDef,
        ScanAdd
      },
      methods: {
        deleteRow(value) {
          this.isDeleted = value;
        },
        showScan(value) {
          this.selectedId = value;
          this.addScanBatch(value);
          this.$emit("processingBatch", true);
          this.processingBatch = true;
        },
        async addScanBatch(Id) {
          const selectedItems = await API.getPhysicalInventoryBatch(Id);
          if (selectedItems.data.Id === this.selectedId) {
            this.items = selectedItems.data.Locations;
          }
        },
        clickedRow(value) {
          if (
            this.expanded.length &&
            this.expanded[0].StorageName == value.StorageName
          ) {
            this.expanded = [];
          } else {
            this.expanded = [];
            this.expanded.push(value);
          }
        }
      },
      data: () => ({
        isDeleted: false,
        groupBy: "barCode",
        expanded: [],
        items: [],
        toDelete: "",
        totalResults: 0,
        loading: true,
        headers: [
          {
            text: "Localisation",
            sortable: true,
            value: "StorageName",
            class: "large-column font-weight"
          },
          {
            text: "Paquets scannés",
            sortable: true,
            value: "ScannedProduct",
            class: "large-column font-weight"
          },
          {
            text: "Paquets entrants",
            sortable: true,
            value: "Incoming",
            class: "large-column font-weight"
          },
          {
            text: "Paquets sortants",
            sortable: true,
            value: "Outgoing",
            class: "large-column font-weight"
          },
          {
            text: "Paquets inconnus",
            sortable: true,
            value: "Unknown",
            class: "large-column font-weight"
          }
        ]
      })
    };
    </script>

扫描网格代码（子）：

    <template>
      <div class="codeContainer">
        <div class="cancelLocation">
          <v-flex class="justify-center">
            <v-btn class="ma-5" large color="lowerCase" tile  @click="deleteLocation"
              >Annuler le dépôt de cette localisation</v-btn
            >
          </v-flex>
        </div>
      </div>
    </template>

    <script>
    export default {
      name: "ScanGridCode",
      props: {
        item: {
          type: Object,
          required: true
        }
      },
      methods: {
        deleteLocation() {
          this.item.IsDeleted = true;
          this.$emit("IsDeleted", true);
        }
      },
      data: () => ({
        IsDeleted: false,
        groupBy: 0,
        headersGroupCode: [
          {
            text: "Code barre",
            sortable: true,
            value: "SerialNumber",
            class: "large-column font-weight-light"
          },
          {
            text: "De",
            sortable: true,
            value: "FromLocation",
            class: "large-column font-weight-light"
          },
          {
            text: "Vers",
            sortable: true,
            value: "ToLocation",
            class: "large-column font-weight-light"
          }
        ]
      })
    };
    </script>

我使用 Vuetify 2.1.7 和 Vue 2.6.10。当我单击按钮时，我调用 deleteLocation 函数。我假设我需要向我的父母 $emit 一个值，但之后我不知道如何定位 tr 来改变它的样式。

Answer 1

由于您使用的是 Vuex，我建议使用诸如 store.state.selectedRow 之类的变量来跟踪是否选择了一行（或者如果有不止一行，则选择了哪一行）。然后你可以在你的 Vue 组件中有一个计算属性myProperty = this.$store.state.selectedRow，它会自动反映单一的事实来源，你的条件类可以绑定到这个myProperty。这意味着您无需担心发出事件。

Answer 2

发出事件的方法是应该做什么。所以我假设你将从 deleteLocation 函数发出。 由于您需要对行进行自定义样式，因此您需要添加项目插槽并在那里添加您的逻辑

<template v-slot:item="{ item, select}">
 <tr :class="key === coloredRow ? 'custom-highlight-row' : ''">

     <td :colspan="12">
    <ScanGridCode @changeColor="changeColor(key)" :item="item" />
    </td>
 //add this method to your script element
 changeColor(idx) {
      this.coloredRow = idx;
    }