如何在Vuetify的DataTable组件表头中添加自定义图标

问题原因 #

你原有代码的自定义表头不生效，是因为两个核心问题：

1. Vuetify 2.x及以上版本已经更新了插槽语法，你用的旧版slot="headers" slot-scope="props"写法存在版本兼容问题，新版统一用v-slot语法。
2. 你只需要给单列表头加+图标，不需要重写整个表头行，直接使用对应列的专属插槽更简单，也不会和内置表头逻辑冲突。

修正步骤 #

第一步：补全操作列配置 #

首先要在headers数组里定义对应操作列，列的value属性要和后续插槽名对应：

headers: [
  { text: '姓名', value: 'name', align: 'left' ,width: "25%" },
  { text: '身份证号', value: 'PersonelIdNumber' },
  { text: '手机号1', value: 'Cellular1' },
  { text: '手机号2', value: 'Cellular2' },  
  { text: '工作电话',  value: 'WorkPhone' },  
  { text: '内部电话',  value: 'Interphone' },
  { text: '邮箱',   value: 'Email' },
  // 新增操作列，value设为Actions，和插槽名对应
  { text: '', value: 'Actions', sortable: false, align: 'right'}
]

第二步：使用单列自定义表头插槽 #

删掉原有重写整行表头的代码，直接用单列表头专属插槽，插槽命名规则为v-slot:header.[列的value值]：

<v-data-table 
  item-key="name"
  :items="complainantInfos"
  :headers="headers"
  sort-by="Id"
  class="elevation-1"
>
  <template v-slot:top>
    <v-toolbar flat color="white">
      <v-toolbar-title>巡检记录</v-toolbar-title>
      <v-spacer></v-spacer>           
    </v-toolbar>
  </template>
  <!-- 仅自定义Actions列的表头 -->
  <template v-slot:header.Actions="{ header }">
    <v-icon small>plus-circle-outline</v-icon>{{ header.text }}
  </template>
</v-data-table>

拓展：如果需要给所有表头加图标 #

如果你确实需要重写全部表头的展示逻辑，把旧版插槽语法改成新版v-slot:headers即可：

<template v-slot:headers="props">
  <tr>         
    <th
      v-for="header in props.headers"
      :key="header.value" <!-- 建议用value作为key，避免text重复导致渲染异常 -->
    >
      <v-icon small >plus-circle-outline</v-icon>
      {{ header.text }}
    </th>
  </tr>
</template>

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