Vuetify Datatable item.<name> 模板未被应用 - 但其他模板没问题

Question

编辑 1： 我添加了一个代码笔 here。

我有一个简单的数据表：

<v-data-table 
    :items="filteredSpecialOrders" 
    :headers="headers" 
    :loading="isLoading"
    :group-by="groupby" 
    :footer-props="footerprops"
    item-key="Id"
    show-expand
    >
    <template #expanded-item="{ headers, item }">
        <td :colspan="headers.length">
            The expanded-item template is working.  Customer is {{ item.Customer }}
        </td>
        </template>
        <template #top>
        <div>The top template is working</div>
        </template>
    <template #item.SubmittedDateSort="{ item }">
        broken 
    </template>
    <template #item.EtaWarehouseSort="{ item }">
        broken
    </template>
</v-data-table>

这些 headers:

headers() {
    return [
        { text: 'Submitted', value: 'SubmittedDateSort', },
        { text: 'ETA to Whse', value: 'EtaWarehouseSort', },
        // and so on
    ]
},

这是 computed() 部分的 items：

modifiedSpecialOrders() {
    return this.specialOrders
        .map((spo) => {
            return {
                ...spo,

                SubmittedDate: spo.SubmittedDate && new Date(spo.SubmittedDate),
                SubmittedDateSort: spo.SubmittedDate && new Date(spo.SubmittedDate).getTime(),
                EtaWarehouse: spo.EtaWarehouse && new Date(spo.EtaWarehouse),
                EtaWarehouseSort: spo.EtaWarehouse && new Date(spo.EtaWarehouse).getTime(),
            };
        });

EtaWarehouseSort 是 new Date(datestring).getTime() 的结果 - 基本上是几毫秒的排序。

该模板用于提供日期的“human-readable”版本 - 但正如您从屏幕截图中看到的那样，我所看到的只是毫秒。使用当前模板，我应该只看到 broken 这个词，但我仍然看到毫秒数。我不知道为什么这没有应用模板。

Answer 1

我看过你的codepen。我发现问题与 header 值使用 PascalCase（还有驼峰式）有关。尽管它可以显示数据，但您无法访问 DOM 模板中的命名槽，因为浏览器会将任何大写符号解释为小写。请参阅此 GitHub bug report and the Vue documentation page，其中包含有关此问题的提示。

提出了两个解决方案：第一个很明显 - 将所有 header 的值键转换为小写。第二，使用我不太熟悉的字符串模板。

Vuetify Datatable item.<name> 模板未被应用 - 但其他模板没问题

Vuetify Datatable item.<name> template not being applied - but other templates are fine

vue.js

vuetify.js

vuetify-datatable