Vuetify DataTable自定义v-slot单元格不显示问题求助

问题分析 #

你在ASP.NET Web Forms项目中使用Vue 2.7.14 + Vuetify 2.6.13的v-data-table组件，尝试通过v-slot:item.businessName自定义businessName列的单元格内容，但无法正常显示。结合你提供的代码和数据，核心问题点如下：

• 数据字段不匹配：你的supplierList数据对象中不存在businessName字段，而header中该列的value设置为businessName，即使使用自定义slot，Vuetify可能因无法找到对应字段导致渲染异常。
• Vue 2.7与Vuetify 2.x的slot语法兼容性：Vue 2.7支持v-slot语法，但Vuetify 2.x对新语法的支持可能存在兼容性问题。
• loading状态未正确切换：如果loadingGrid始终为true，表格会一直显示加载文本，自定义单元格内容无法渲染。

解决方案 #

1. 补全数据字段或调整header配置 #

确保supplierList的每个对象包含businessName字段，示例修改如下：

supplierList: [{
    "businessName": "示例企业名称", // 新增对应字段
    "supplierTypeId": 1,
    "name": "Transportista",
    // 其他原有字段...
}]

如果想使用数据中已有的字段（比如name），直接调整header的value即可：

{ text: this.$t('supplier_businessName'), value: 'name' },

2. 改用Vuetify 2.x兼容的slot语法 #

将v-slot替换为旧版的slot和slot-scope语法：

<v-data-table :footer-props="{ 'items-per-page-options': [10, 50, 100, 500, 1000] }" :items-per-page="10" :headers="headers" :items="supplierList" :loading="loadingGrid" :loading-text="$t('gral_loading')" :options.sync="options" :server-items-length="totalItems">
  <template slot="item.businessName" slot-scope="{item}">
    Hola
  </template>
</v-data-table>

3. 确认loading状态正常切换 #

在数据加载完成后，将loadingGrid设置为false，确保表格进入正常渲染状态：

// 数据加载完成后执行
this.loadingGrid = false;

4. 校验slot名称的大小写一致性 #

确保v-slot:item.businessName中的businessName与header中value的大小写完全一致，Vuetify对字段名称的大小写是敏感的。

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