Vue2+Vuetify如何自定义单个表格表头？

原生HTML+CSS方案 #

直接给第一个表头标签内插入图标元素，配合CSS伪类精准控制样式，完全不影响其他表头：

<table>
  <thead>
    <tr>
      <!-- 第一个表头嵌入图标 -->
      <th>
        <span class="header-icon">🔍</span> 搜索内容
      </th>
      <th>日期</th>
      <th>状态</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据行 -->
  </tbody>
</table>

/* 仅针对第一个表头的图标设置样式 */
thead th:first-child .header-icon {
  margin-right: 8px;
  color: #2563eb;
  font-size: 16px;
}

通过:first-child伪类锁定第一个<th>，只对它内部的图标生效，避免全局修改带来的样式混乱。

前端框架场景方案 #

Vue 示例 #

<template>
  <table>
    <thead>
      <tr>
        <th>
          <i class="fa fa-search"></i> <!-- 可替换为任意图标库 -->
          搜索内容
        </th>
        <th>日期</th>
        <th>状态</th>
      </tr>
    </thead>
    <!-- 表格内容 -->
  </table>
</template>

<style scoped>
thead th:first-child i {
  margin-right: 8px;
}
</style>

React 示例 #

import { FaSearch } from 'react-icons/fa';

export default function CustomTable() {
  return (
    <table>
      <thead>
        <tr>
          <th>
            <FaSearch style={{ marginRight: '8px', fontSize: '16px' }} />
            搜索内容
          </th>
          <th>日期</th>
          <th>状态</th>
        </tr>
      </thead>
      {/* 表格数据 */}
    </table>
  );
}

框架内直接在目标表头组件中插入图标，通过局部样式或内联样式调整，逻辑简洁且不会影响其他表头。

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