嵌套v-data-table模板中如何访问外层父v-data-table的item属性

解决方案 #

完全可以在模板内直接引用外层item，不需要提前给子项挂载父引用或复制父数据，问题出在你内外层插槽的参数变量重名，内层的item变量覆盖了外层的同名变量，只需要修改外层插槽的参数命名即可：

具体操作步骤 #

1. 给外层expanded-item插槽的item参数重命名为不会和内层冲突的名称，比如parentItem
2. 在内层插槽中直接使用重命名后的外层变量即可

修改后的代码示例：

<div class="subsection">
  <v-data-table
    :headers="prescriptionHeaders"
    :items="pendingItems"
    show-expand
    item-key="id"
  >
    <!-- 外层插槽item重命名为parentItem，避免和内层item冲突 -->
    <template v-slot:expanded-item="{headers, item: parentItem}">
      <td :colspan="headers.length">
        <v-data-table
          :headers="pendingPrestationHeaders"
          :items="parentItem.prestations"
          v-model="selected"
        >
          <!-- 内层item也可以重命名为childItem更易区分 -->
          <template v-slot:[`item.actions`]="{ item: childItem }">
            <div class="table-row-actions">
              <v-tooltip left v-if="childItem.categeoryTypeId === 6">
                <template v-slot:activator="{ on, attrs }">
                  <v-icon
                    v-bind="attrs"
                    v-on="on"
                    <!-- 这里直接传外层parentItem或其指定属性即可 -->
                    @click="func1(parentItem, childItem)"
                    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>

补充说明 #

该写法是Vue作用域插槽的原生特性，基于ES6对象解构重命名语法实现，不会污染原始数据也没有额外性能开销，你可以根据业务需求只传外层item的指定属性，比如func1(parentItem.id, childItem)。

内容的提问来源于stack exchange，提问作者Shikamu