Vuetify嵌套v-data-table时子表如何访问expanded-item插槽父项ID

无法在子表中获取父行ID是两个错误导致的：

• 内外两层插槽的作用域变量都命名为item，内层插槽的item变量会覆盖外层expanded-item插槽传入的父行数据，作用域优先级导致在内层无法访问外层的父行对象
• 代码中调用方法时传入的parentItem.Id从未被定义，且父行的ID字段实际为finDocId，不存在Id这个属性

给内外层插槽解构出的行对象设置不同的变量名，避免命名冲突即可，修正后可运行的代码如下：

<v-data-table
  :headers="headers"
  :items="financialDocuments"
  :single-expand="singleExpand"
  item-key="finDocId"
  show-expand
>
  <template v-slot:expanded-item="{ item: parentRow }">
    <td :colspan="attachmentHeaders.length">
      <p>{{ parentRow.finDocId }}</p>
      <v-data-table
        :headers="attachmentHeaders"
        :items="parentRow.attachmentPlainDtos"
      >
        <template v-slot:[`item.attachmentActions`]="{ item: attachmentItem }">
          <v-icon large @click="removeAttachment(parentRow.finDocId, attachmentItem.attachmentId)">
            mdi-delete
          </v-icon>
        </template>
      </v-data-table>
    </td>            
  </template>
</v-data-table>

• 上述代码将外层expanded-item插槽拿到的父行数据重命名为parentRow，内层子表插槽拿到的附件行数据重命名为attachmentItem，两个变量作用域独立，不存在覆盖问题
• 调用removeAttachment时直接读取parentRow.finDocId即可拿到父行ID，和你在p标签中正常渲染的是同一个值

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