Vuetify v-data-table作用域item插槽为何未按预期工作

初始实现代码 #

我基于Vuetify的<v-data-table>封装自定义表格组件，初始版本代码如下：

<!-- DataTable.vue -->
<template>
  <v-card outlined>
    <v-data-table
      v-bind="$attrs"
      v-on="$listeners"
      dense
    >
      <template
        v-for="(_, name) in $scopedSlots"
        #[name]="slotData"
      >
        <slot
          :name="name"
          v-bind="slotData"
        ></slot>
      </template>
    </v-data-table>
  </v-card>
</template>

修改后的异常现象 #

我尝试给内部透传的插槽增加默认渲染内容，修改后的插槽代码片段如下：

<!-- 插槽修改片段 -->
<slot
  :name="name"
  v-bind="slotData"
>
  DEFAULT RENDER
</slot>

在业务页面调用这个自定义组件时，没有传入任何自定义插槽，调用代码如下：

<!-- UsersDataTable.vue -->
<template>
  <DataTable
    :headers="headers"
    :items="users"
  ></DataTable>
</template>

最终页面实际渲染效果为所有单元格都显示DEFAULT RENDER，没有正常展示表格数据：

和预期的正常表格渲染效果不符：

问题根因 #

出现这个问题的核心是插槽遍历逻辑和v-data-table的渲染规则存在冲突：

• 代码中v-for="(_, name) in $scopedSlots的遍历对象是父组件传给自定义DataTable的插槽，不是v-data-table自身提供的所有内置插槽
• 当调用方没有给DataTable传任何自定义插槽时，$scopedSlots为空对象，v-for循环不会执行，正常情况下v-data-table收不到外部传入的插槽，就会渲染自身内置的默认单元格内容，也就是预期的正常表格效果
• 一旦给透传用的<slot>加上默认内容，就相当于主动声明了接管对应插槽的渲染，但遍历范围没有覆盖v-data-table自带的item.<字段名>、header等内置插槽，最终所有单元格的原生渲染逻辑都被写入的默认文本覆盖，就出现了全量显示默认内容的异常

修复思路 #

要实现「外部传入插槽时优先用自定义内容，没传插槽时走v-data-table原生默认渲染」的效果，不能仅遍历父组件传入的$scopedSlots，需要将v-data-table的默认插槽做兜底透传，或直接获取v-data-table实例上的完整插槽列表做遍历，避免覆盖组件原生的默认渲染逻辑。

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