Personalizar el contenido de los encabezados de tabla en Vue 3 con Element Plus ofrece varias alternativas, como el uso de componentes de iconos de Element Plus, slots, pseudo-elementos CSS o librerías de iconos externas como Font Awesome.
Método 1: Utilizando la propiedad render-header
Este enfoque permite renderizar contenido personalizado directamente en la función render-header de una columna de tabla. Es útil para añadir texto y elementos interactivos como tooltips.
<el-table :data="datosTabla">
<el-table-column
prop="nombre"
label="Nombre"
:render-header="(h, { column }) => {
return (
h('div', { class: 'flex items-center' }, [
h('span', column.label),
h(ElTooltip, { content: 'Información detallada sobre el nombre', placement: 'top' }, [
h('i', { class: 'el-icon-question', style: 'margin-left: 5px;' })
])
])
)
}"
></el-table-column>
</el-table>
Método 2: Empleando Slots de Encabezado
Los slots proporcionan una manera declarativa de ineyctar contenido personalizado en partes específicas de un componente. El slot #header en el-table-column es ideal para esto.
<el-table :data="datosTabla">
<el-table-column prop="edad" label="Edad">
<template #header>
<div class="flex items-center">
<span>Edad</span>
<el-tooltip content="Este es un tooltip para la columna edad" placement="top">
<i class="el-icon-question" style="margin-left: 5px;"></i>
</el-tooltip>
</div>
</template>
</el-table-column>
</el-table>
Método 3: Inserción de Íconos mediante Pseudo-elementos CSS
Para un enfoque puramente CSS, se pueden usar pseudo-elementos como ::after para añadir iconos después del contenido del encabezado. Esto requiere conocer el selector CSS específico y el código Unicode del icono deseado.
<el-table :data="datosTabla">
<el-table-column prop="direccion" label="Dirección" title="Tooltip de dirección"></el-table-column>
</el-table>
<style>
/* Añadir un icono después del tercer encabezado de columna */
.el-table__header th:nth-child(3) .cell::after {
content: "\e609"; /* Código Unicode de un icono de Element Plus */
font-family: "element-icons";
margin-left: 8px;
font-size: 14px;
}
</style>
Método 4: Creación de un Componente de Encabezado Reutilizable
Encapsular la lógica del encabezado en un componente Vue personalizado promueve la reutilización y la mantenibilidad del código. Este componente puede aceptar props para el texto de la etiqueta y el contenido del tooltip.
<!-- components/TableHeaderWithIcon.vue -->
<template>
<div class="flex items-center">
<span>{{ etiqueta }}</span>
<el-tooltip :content="sugerencia" placement="top">
<i class="el-icon-question" style="margin-left: 5px;"></i>
</el-tooltip>
</div>
</template>
<script setup>
defineProps({
etiqueta: String,
sugerencia: String
});
</script>
<!-- Uso en la tabla -->
<el-table :data="datosTabla">
<el-table-column prop="correo" label="Correo Electrónico">
<template #header>
<TableHeaderWithIcon etiqueta="Correo Electrónico" sugerencia="Ayuda sobre la columna de correo" />
</template>
</el-table-column>
</el-table>
Integración con Font Awesome
Font Awesome es una librería de iconos muy popular que se puede integrar fácilmente en proyectos Vue 3.
1. Instalación de Font Awesome:
Instale los paquetes necesarios usando npm o yarn.
npm install @fortawesome/fontawesome-svg-core \
@fortawesome/free-solid-svg-icons \
@fortawesome/vue-fontawesome@latest-2
fontawesome-svg-core: La librería principal.free-solid-svg-icons: Un conjunto de iconos sólidos.vue-fontawesome: El componente Vue oficial para Font Awesome.
2. Configuración Global en main.js:
Importe y registre los iconos que planea usar globalmente.
import { createApp } from 'vue'
import App from './App.vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
// Importar iconos específicos
import { faInfoCircle, faUser } from '@fortawesome/free-solid-svg-icons'
// Añadir los iconos a la librería
library.add(faInfoCircle, faUser)
createApp(App)
.component('font-awesome-icon', FontAwesomeIcon) // Registro global del componente
.mount('#app')
3. Uso en Plantillas Vue:
Utilice el componente <font-awesome-icon> en sus plantillas.
<template>
<div>
<font-awesome-icon icon="user" />
<font-awesome-icon icon="info-circle" class="ml-2 text-blue-500" />
</div>
</template>
4. Uso Específico en Componentes:
Para un uso más contorlado, importe el componente y los iconos directamente en el script del componetne.
<template>
<div>
<font-awesome-icon :icon="iconoInfo" />
</div>
</template>
<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
export default {
components: {
FontAwesomeIcon
},
setup() {
return {
iconoInfo: faInfoCircle
}
}
}
</script>
Ejemplo Práctico con Tooltip y Estilos Personalizados
A continuación, se muestra un ejemplo de cómo combinar render-header con ElTooltip y un icono de Font Awesome para encabezados de tabla específicos.
<el-table-column
:prop="item.prop"
:label="item.name"
header-align="center"
:width="item.width"
align="center"
:render-header="(props) => renderizarEncabezadoConTooltip(props, item)"
>
<!-- Lógica de celda personalizada -->
<template #default="scope">
<div v-if="item.name === 'Estado Info'">
<span v-if="scope.row[item.prop] === 0">Completado</span>
<span v-else style="color: red;">{{ scope.row[item.prop] }} restantes</span>
</div>
<div v-else>
<span v-if="scope.row[item.prop] === 0">Listo</span>
<span v-else-if="item.separador" style="color: red;">No Listo</span>
<span v-else style="color: red;">{{ scope.row[item.prop] }} no listos</span>
</div>
</template>
</el-table-column>
// En el script del componente (o archivo de utilidades)
import { h } from 'vue';
import { ElTooltip } from 'element-plus';
// Importar Font Awesome si se usa
// import '@fortawesome/fontawesome-free/css/all.css'; // Asegúrate de importar los estilos CSS
const renderizarEncabezadoConTooltip = (props, item) => {
const descripcionesTooltips = {
'Info de Personal': 'Número de campos no completados (excepto "Alias").',
'Info Docente': 'Estado de cumplimiento docente en los últimos 5 años.',
'Info General': 'Cantidad de campos pendientes de completar (excluyendo "Nombre Antiguo").'
};
const contenidoTooltip = descripcionesTooltips[item.name];
if (contenidoTooltip) {
// Usamos h para crear VNodes programáticamente
return h(
ElTooltip,
{ placement: 'top', content: contenidoTooltip },
{
default: () => h(
'div',
{ class: 'flex items-center justify-center' },
[
// Ejemplo con icono de Font Awesome
h('i', {
class: 'fas fa-info-circle mr-2 text-primary', // Clase de Font Awesome
style:{'font-size': '16px','margin-top': '3px'} }),
h('span', props.column.label)
]
)
}
);
} else {
// Para columnas sin tooltip, simplemente muestra la etiqueta
return h('span', props.column.label);
}
};