0

编辑1：我在这里添加了一个codepen 。

我有一个简单的数据表：

<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() {
    return [
        { text: 'Submitted', value: 'SubmittedDateSort', },
        { text: 'ETA to Whse', value: 'EtaWarehouseSort', },
        // and so on
    ]
},

这是该items部分的computed()内容：

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()- 基本上是毫秒排序的结果。

该模板用于提供日期的“人类可读”版本 - 但正如您从屏幕截图中看到的那样，我所看到的只是毫秒。使用当前模板，我应该看到的只是损坏的单词，但我仍然看到毫秒。我不知道为什么这不应用模板。

在此处输入图像描述

4

1 回答 1

0

我看过你的codepen。我发现问题与标题值使用 PascalCase（camelCase 也是如此）有关。虽然它适用于显示数据，但您无法访问 DOM 模板中的命名槽，因为浏览器会将任何大写符号解释为小写。请参阅此GitHub 错误报告和Vue 文档页面，其中包含有关此问题的提示。

提出了两种解决方案：第一种很明显 - 将所有标头的 value 键转换为小写。其次，使用我不太熟悉的字符串模板。

于 2021-09-22T17:56:23.567 回答