Vuetify Datatable的item.<name>模板未生效 其余模板运行正常

问题原因 #

• Vue 的插槽名会自动转换为 kebab-case 格式，你现在使用的驼峰命名的 #item.SubmittedDateSort、#item.EtaWarehouseSort 插槽名无法被组件正确匹配，是插槽不生效的核心原因。
• 额外检查项：你的 v-data-table 绑定的 items 为 filteredSpecialOrders，但贴出的计算属性名称是 modifiedSpecialOrders，请确认你已经正确将计算后的订单数据赋值给 filteredSpecialOrders，避免字段缺失。

解决方法 #

1. 将插槽名改为短横线分隔的格式，即可正常渲染自定义内容，示例如下：

<template #item.submitted-date-sort="{ item }">
  <!-- 这里可以写你需要的日期格式化逻辑 -->
  {{ item.SubmittedDate?.toLocaleDateString('zh-CN') }}
</template>
<template #item.eta-warehouse-sort="{ item }">
  {{ item.EtaWarehouse?.toLocaleDateString('zh-CN') }}
</template>

2. （可选优化）你可以直接在表头配置中指定排序字段，不用将时间戳作为展示字段的value，代码更易维护：

headers() {
    return [
        { text: 'Submitted', value: 'SubmittedDate', sortBy: 'SubmittedDateSort' },
        { text: 'ETA to Whse', value: 'EtaWarehouse', sortBy: 'EtaWarehouseSort' },
        // 其余配置
    ]
},

修改后插槽名可调整为更易读的 #item.submitted-date 格式。

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