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

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

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

) }" >

二、方法2：使用插槽

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

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

五、 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 模板中直接使用  组件

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

总结：

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

html：

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