实用指南: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); }};