实用指南：vue3+elementplus表格表头加图标及文字提示

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

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

   {      return (                  {column.label}                                              )    }"  >

二、方法2：使用插槽

年龄

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

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

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

      {{ label }}                 export default {  props: {    label: String,    tooltip: String  }}

五、 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> 组件

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

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

         import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'import { faUser } from '@fortawesome/free-solid-svg-icons' export default {  components: {    FontAwesomeIcon  },  setup() {    return {      faUser    }  }}

总结：

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

html：

 renderHeaderWithTooltip(props, item)"            >                                                 已填写                  {{ scope.row[item.prop] }}项未填写                                                  完善                  未完善                                      {{ scope.row[item.prop] }}项未完善

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);  }};