vue3+elementplus表格表头加图标及文字提示

表头加自定义内容有很多种方法，包括使用el-icon，插槽，CSS 伪元素添加图标还有font-awesome等等。

一、方法一：使用render-header属性

<el-table :data="tableData">
  <el-table-column 
    prop="name" 
    label="姓名"
    :render-header="(h, { column }) => {
      return (
        <div>
          <span>{column.label}</span>
          <el-tooltip content="这是姓名列提示" placement="top">
            <i class="el-icon-question" style="margin-left: 5px;"></i>
          </el-tooltip>
        </div>
      )
    }"
  >

二、方法2：使用插槽

<el-table :data="tableData">
  <el-table-column prop="age" label="年龄">
    <template #header>
      <div>
        <span>年龄</span>
        <el-tooltip content="这是年龄列提示" placement="top">
          <i class="el-icon-question" style="margin-left: 5px;"></i>
        </el-tooltip>
      </div>
    </template>
  </el-table-column>
</el-table>

三、方法3：通过 CSS 伪元素添加图标

<el-table :data="tableData">
  <el-table-column prop="address" label="地址" title="这是地址列提示">
  </el-table-column>
</el-table>

<style>
/* 在特定列后添加图标 */
.el-table__header th:nth-child(3) .cell::after {
  content: "\e609"; /* ElementPlus图标Unicode */
  font-family: "element-icons";
  margin-left: 5px;
}
</style>

四、方法4：封装自定义组件

<!-- components/TableHeader.vue -->
<template>
  <div>
    <span>{{ label }}</span>
    <el-tooltip :content="tooltip" placement="top">
      <i class="el-icon-question" style="margin-left: 5px;"></i>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  props: {
    label: String,
    tooltip: String
  }
}
</script>

<!-- 在表格中使用 -->
<el-table :data="tableData">
  <el-table-column prop="email" label="邮箱">
    <template #header>
      <TableHeader label="邮箱" tooltip="这是邮箱列提示" />
    </template>
  </el-table-column>
</el-table>

五、 Font Awesome 图标

1、使用 npm 或 yarn 安装核心库及所需图标集：

npm install @fortawesome/fontawesome-svg-core \
            @fortawesome/free-solid-svg-icons \
            @fortawesome/free-regular-svg-icons \
            @fortawesome/free-brands-svg-icons \
            @fortawesome/vue-fontawesome@prerelease

• fontawesome-svg-core：核心库
• free-solid-svg-icons：实心图标集
• free-regular-svg-icons：常规图标集
• free-brands-svg-icons：品牌图标集
• vue-fontawesome@prerelease：Vue3 兼容版本

2、在 src/main.js 中导入并注册常用图标：

import { createApp } from 'vue'
import App from './App.vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'

// 导入需要的图标
import { 
  faUser, faEnvelope, faPhone, faInfoCircle,
  faEdit, faTrash, faCheck, faTimes 
} from '@fortawesome/free-solid-svg-icons'

// 将图标添加到库中
library.add(faUser, faEnvelope, faPhone, faInfoCircle, 
            faEdit, faTrash, faCheck, faTimes)

createApp(App)
  .component('font-awesome-icon', FontAwesomeIcon) // 全局注册组件
  .mount('#app')

3、在 Vue 模板中直接使用 <font-awesome-icon> 组件

<template>
  <div>
    <!-- 基本用法 -->
    <font-awesome-icon icon="user" />
    
    <!-- 带样式的图标 -->
    <font-awesome-icon icon="envelope" class="text-blue-500 text-xl" />
    
    <!-- 品牌图标 -->
    <font-awesome-icon icon="['fab', 'github']" />
    
    <!-- 动态图标 -->
    <font-awesome-icon :icon="currentIcon" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIcon: 'check' // 动态切换图标
    }
  }
}
</script>

4、在特定组件中使用图标

<template>
  <div>
    <font-awesome-icon :icon="faUser" />
  </div>
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUser } from '@fortawesome/free-solid-svg-icons'

export default {
  components: {
    FontAwesomeIcon
  },
  setup() {
    return {
      faUser
    }
  }
}
</script>

总结：

我用到的实在特定页面特定表格列使用图标，主要代码：

html：

<el-table-column
              v-else-if="!item.show"
              :prop="item.prop"
              :label="item.name"
              header-align="center"
              :width="item.width"
              align="center"
              :render-header="(props) => renderHeaderWithTooltip(props, item)"
            > 
              <template #default="scope">
                <div v-if="item.name=='教育教学信息状态'">
                  <text v-if="scope.row[item.prop] == 0">已填写</text>
                  <text v-else style="color: red">{{ scope.row[item.prop] }}项未填写</text>
                </div>
                <div v-else>
                  <text v-if="scope.row[item.prop] == 0">完善</text>
                  <text v-else-if="item.separate" style="color: red">未完善</text>
                  <text v-else style="color: red">
                    {{ scope.row[item.prop] }}项未完善 
                  </text>
                </div>
              </template>
            </el-table-column>

js:

//引入
import { h } from 'vue';
import { ElTooltip } from 'element-plus';
import 'font-awesome/css/font-awesome.min.css';

/ 表头展示图标及提示
const renderHeaderWithTooltip = (props, item) => {
  const tooltipContent = {
    '编制信息状态': '该教师除"隶属集团"外的字段未填写的数量',
    '教育教学信息状态': '近5年教育教学填写情况',
    '个人信息状态': '该教师除"曾用名"外的字段未填写的数量'
  }[item.name];
  
  if (tooltipContent) {
    return h(
      ElTooltip,
      { placement: 'top', content: tooltipContent },
      {
        default: () => h(
          'div',
          { class: 'flex items-center justify-center' },
          [
            h('i', {
              class: 'fa fa-info-circle mr-3 text-primary',
               style:{'font-size': '16px','margin-top': '3px'} }),
            h('span', props.column.label)
          ]
        )
      }
    );
  } else {
    // 对于不需要提示的列，直接显示标签
    return h('span', props.column.label);
  }
};