我在父组件中有一个扩展数据表，在带有按钮的扩展行中有一个子组件。单击子组件内的按钮时，我想更改关联行的背景颜色。我不确定如何针对该行在事件中添加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",value: "ScannedProduct",{
            text: "Paquets entrants",value: "Incoming",{
            text: "Paquets sortants",value: "Outgoing",{
            text: "Paquets inconnus",value: "Unknown",class: "large-column font-weight"
          }
        ]
      })
    };
    </script>

ScanGridCode（子级）：

    <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,methods: {
        deleteLocation() {
          this.item.IsDeleted = true;
          this.$emit("IsDeleted",true);
        }
      },data: () => ({
        IsDeleted: false,groupBy: 0,headersGroupCode: [
          {
            text: "Code barre",value: "SerialNumber",class: "large-column font-weight-light"
          },{
            text: "De",value: "FromLocation",{
            text: "Vers",value: "ToLocation",class: "large-column font-weight-light"
          }
        ]
      })
    };
    </script>

我使用Vuetify 2.1.7和Vue 2.6.10。当我单击按钮时，我调用deleteLocation函数。我想我需要给父母$ emit一个值，但是在那之后我不知道如何针对tr来更改其样式。