社区首页 >问答首页 >如何从嵌套的v-数据表中的模板访问父v-数据表？

问如何从嵌套的v-数据表中的模板访问父v-数据表？
EN

Stack Overflow用户

提问于 2021-07-28 03:51:15

回答 2查看 1.6K关注 0票数 1

我有一个用vue制作的页面，使用vuetify。它显示一个v数据表，该表可以展开以显示另一个v数据表，如下所示：

      <div class="subsection">
        <v-data-table
          :headers="prescriptionHeaders"
          :items="pendingItems"
          show-expand
          item-key="id"
        >
          <template v-slot:expanded-item="{headers,item}">
            <td :colspan="headers.length">
              <v-data-table
                :headers="pendingPrestationHeaders"
                :items="item.prestations"
                v-model="selected"
              >
                <template v-slot:[`item.actions`]="{ item }">
                  <div class="table-row-actions">
                    <v-tooltip left v-if="item.categeoryTypeId === 6">
                      <template v-slot:activator="{ on, attrs }">
                        <v-icon
                          v-bind="attrs"
                          v-on="on"
                          @click="func1(item)"
                          class="action-doc"
                        >
                          mdi-file-document-outline
                        </v-icon>
                      </template>
                      <span>blablabla</span>
                    </v-tooltip>
                  </div>
                </template>

              </v-data-table>
            </td>
          </template>
        </v-data-table>
      </div>

问题是，我需要从外部v-数据表中调用带有项的属性的func1。如何从我的<template v-slot:[`item.actions`]模板中访问它？我知道我可以在我的子项中包含对父项的引用，或者只是将我从父项中需要的数据复制到子项目中(这就是我目前正在做的)，但我只是好奇是否有一种方法来引用模板槽中的“外部”项，但我想没有。

vue.js

vuetify.js

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 2

Stack Overflow用户

发布于 2022-02-14 05:53:51

要访问外部v-数据表的项，需要使用props.item更改内部数据表，类似于这样的操作。

   <template v-slot:[`props.item.actions`]="{ props.item }">
      <div class="table-row-actions">
        <v-tooltip left v-if="props.item.categeoryTypeId === 6">
          <template v-slot:activator="{ on, attrs }">
            <v-icon
              v-bind="attrs"
              v-on="on"
              @click="func1(item)"
              class="action-doc"
            >
              mdi-file-document-outline
            </v-icon>
          </template>
          <span>blablabla</span>
        </v-tooltip>
      </div>
    </template>

票数 0

Stack Overflow用户

发布于 2022-06-22 01:04:40

我也有同样的挑战。我想从内部访问外部v-数据表的项目ID。该段正确地显示了数据。如何从内部数据表访问此值？

<template v-slot:expanded-item="{ item }">
        <td :colspan="attachmentHeaders.length">
          <p>{{item.finDocId}}</p>
          <v-data-table
            :headers="attachmentHeaders"
            :items="item.attachmentPlainDtos"
            item-key="finDocId"
            disable-pagination
            :hide-default-footer="true"
            no-data-text='Geen bijlagen'
          >
            <template v-slot:[`item.attachmentActions`]="{ item }">
              <v-icon large @click="removeAttachment(item.id, item.attachmentId)">
                mdi-delete
              </v-icon>
            </template>
          </v-data-table>
        </td>            
      </template>