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