Vuetify 2.6.12中v-data-table插槽模板无法生效的技术求助

我见过很多用 v-data-table 内部 template 自定义表格的示例，自己尝试做带 v-menu 的内联筛选功能，结果连模板修改都没效果。比如给表头加图标的示例完全没反应，就像模板根本没起作用，控制台也没报错，数据能正常加载。

代码示例1（表头自定义） #

<v-data-table :headers="headersResults"
              :items="results"
              :search="search"
              height="inherit"
              @click:row="goToItem">
  <template v-slot:headers="props">
      <tr>
          <th v-for="(header,i) in props.headers"
              :key="i">
              {{ header.text }}
              <v-icon small>arrow_upward</v-icon>
              <v-btn icon color="grey lighten-2">
                  <v-icon class='no-rotate' @click.stop small color="pink">{{ mdi-magnify }}</v-icon>
              </v-btn>
          </th>
      </tr>
  </template>
</v-data-table>

代码示例2（列内容自定义） #

<v-data-table :headers="headerset"
          :items="filteredData"
          :search="searchTable"
          height="inherit"
          @click:row="goToReview"
          :loading="loading"
          loading-text="Loading... Please wait"
          style="cursor: pointer">
  <template v-slot:item.COLUMNNAME="{ item }">
      <v-chip :color="red"
              dark>
          {{ item.COLUMNNAME }}
      </v-chip>
  </template>
</v-data-table>

我用的是 CDN 引入的 Vuetify 2.6.12 版本。

Vuetify 2.x 版本的 v-data-table 插槽规则和 3.x 完全不同，你用的是 3.x 的插槽写法，所以在 2.6.12 里不生效，具体修正如下：

1. 表头自定义的修正（示例1） #

Vuetify 2.x 中，自定义表头的插槽名称是 header（不是 3.x 的 headers），另外 mdi-magnify 不需要用 {{}} 包裹，直接写图标名称即可。修正后的代码：

<v-data-table :headers="headersResults"
              :items="results"
              :search="search"
              height="inherit"
              @click:row="goToItem">
  <template v-slot:header="props">
      <tr>
          <th v-for="(header,i) in props.headers"
              :key="i">
              {{ header.text }}
              <v-icon small>arrow_upward</v-icon>
              <v-btn icon color="grey lighten-2">
                  <v-icon class='no-rotate' @click.stop small color="pink">mdi-magnify</v-icon>
              </v-btn>
          </th>
      </tr>
  </template>
</v-data-table>

如果只想自定义单个表头列，可以用 header.<value> 格式的插槽，其中 <value> 要和你 headersResults 中对应表头的 value 字段完全一致。

2. 列内容自定义的修正（示例2） #

Vuetify 2.x 中，自定义列内容的插槽是 item.<value>，这里的 <value> 必须和 headerset 数组中对应表头的 value 字段大小写完全匹配；另外颜色值 red 需要加引号，因为是字符串类型。修正后的代码：

<v-data-table :headers="headerset"
          :items="filteredData"
          :search="searchTable"
          height="inherit"
          @click:row="goToReview"
          :loading="loading"
          loading-text="Loading... Please wait"
          style="cursor: pointer">
  <template v-slot:item.columnname="{ item }">
      <v-chip color="red"
              dark>
          {{ item.columnname }}
      </v-chip>
  </template>
</v-data-table>

额外注意点 #

• 确认你的 headersResults 和 headerset 数组中的每个表头对象都包含 value 字段，这是 Vuetify 2.x 识别插槽的核心依据。
• 检查事件绑定：代码里的 @@click:row 是笔误，要改成 @click:row。

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