如何在v-data-table表头（除Actions列外）添加同行图标按钮？

问题出在你直接替换了整个表头插槽内容，既没保留原表头文本，也没通过布局容器让图标和文本横向排列。下面提供两种可行方案：

方案一：针对单个表头列定制（推荐，保留默认功能） #

利用Vuetify的header.[字段名]插槽，对每个非Actions列的表头单独修改，既能保留排序等默认功能，又能让图标和文本同行：

<v-data-table
  :headers="tableHeaders"
  :items="items"
  :hide-default-footer="true"
  disable-pagination
  ref="table"
>
  <!-- 遍历非Actions的表头字段，生成对应插槽 -->
  <template 
    v-for="h in tableHeaders" 
    v-slot:[`header.${h.value}`]="{ header }" 
    v-if="h.text !== 'Actions'"
  >
    <div class="d-flex align-center">
      <!-- 图标放在文本前面，加mr-1控制间距 -->
      <v-btn icon small class="mr-1">
        <v-icon small>{{ myicon }}</v-icon>
      </v-btn>
      {{ header.text }}
      <!-- 如果要把图标放后面，替换成下面这段 -->
      <!-- <v-btn icon small class="ml-1">
        <v-icon small>{{ myicon }}</v-icon>
      </v-btn> -->
    </div>
  </template>
</v-data-table>

方案二：修改整个表头插槽 #

如果需要统一修改所有表头，要确保在<th>内用flex容器包裹图标和原文本：

<v-data-table
  :headers="tableHeaders"
  :items="items"
  :hide-default-footer="true"
  disable-pagination
  ref="table"
>
  <template v-slot:header="{ props }">
    <thead>
      <tr>
        <th v-for="h in props.headers" :key="h.value">
          <div class="d-flex align-center">
            <!-- 图标前置 -->
            <v-btn v-if="h.text !== 'Actions'" icon small class="mr-1">
              <v-icon small>{{ myicon }}</v-icon>
            </v-btn>
            <!-- 原表头文本 -->
            {{ h.text }}
            <!-- 图标后置 -->
            <v-btn v-if="h.text !== 'Actions'" icon small class="ml-1">
              <v-icon small>{{ myicon }}</v-icon>
            </v-btn>
          </div>
        </th>
      </tr>
    </thead>
  </template>
</v-data-table>

关键说明 #

• 使用Vuetify内置的d-flex align-center类，让图标和文本横向排列并垂直居中；
• 优先选方案一，它不会破坏表头的默认排序功能，方案二若需排序，还要额外处理排序图标的渲染逻辑。

内容的提问来源于stack exchange，提问作者It's Siddiqi