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