Table

Visualiza múltiples datos con un formato similar. Puede ordenar, filtrar y comparar sus datos en la tabla.

TIP

Este componente requiere el envoltorio <client-only></client-only> cuando se utiliza en SSR (por ejemplo: Nuxt) y SSG (por ejemplo: VitePress).

Tabla básica

La tabla básica es solo para mostrar datos.

Tabla con franjas

La tabla con franjas hace más fácil distinguir filas diferentes.

Tabla con bordes

Tabla con estados

Puede destacar el contenido de la tabla para distinguir entre "success, information, warning, danger" y otros estados.

Tabla con cabecera fija

Cuando hay demasiadas filas, puede usar una cabecera fija.

Tabla con columnas fijas

Cuando se tienen demasiadas columnas, puede fijar algunas de ellas.

Tabla con columnas y cabecera fija

Cuando tiene grandes cantidades de datos para colocar en una tabla, puede fijar la cabecera y columnas al mismo tiempo.

Tabla de altura fluida con cabecera fija (y columnas)

Cuando los datos se cambian dinámicamente, tal vez desee que la tabla tenga una altura máxima en lugar de una altura fija y que muestre la barra de desplazamiento si es necesario.

Agrupando cabeceras de la tabla

Cuando la estructura de datos es compleja, puede usar la cabecera de grupo para mostrar la jerarquía de datos.

Tabla con cabecera de grupo fija

se puede usar la cabecera de grupo fija

Selección simple

La selección de una sola fila es posible.

Selección multiple

También puede seleccionar múltiples filas.

Ordenar

Ordenar los datos para encontrar o comparar información rápidamente.

Filtros

Filtra la tabla para encontrar la información que necesita.

Plantilla de columna personalizada

Personalice la columna de la tabla para que pueda integrarse con otros componentes.

Tabla con cabecera personalizada

Se puede personalizar el encabezado de la tabla para que se pueda adaptar aún más.

Filas expandibles

Cuando el contenido de la fila es demasiado largo y no quiere mostrar la barra de desplazamiento horizontal, puede usar la función de fila expandible.

Datos con estructura de árbol y modo perezoso

Fila resumen

Para una tabla de números, puede agregar una fila extra en el pie de página de la tabla que muestra la suma de cada columna.

Rowspan and colspan

Configure rowspan y colspan para combinar las celdas

Índice personalizado

Puede personalizar el índice de la fila con la propiedad type=index de las columnas.

Disposición de la tabla

La propiedad table-layout establece el algoritmo usado para exponer celdas de tablas, filas y columnas.

Table API

Atributos de la tabla

Nombre	Descripción	Tipo	Default
data	table data	`object`	[]
height	table's height. Por defecto tiene una altura `auto`. Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, se asigna ese valor al style.height de la tabla, la altura es afectada por estilos externos	`string` / `number`	—
max-height	table's max-height. The legal value is a number or the height in px	`string` / `number`	—
stripe	especifica si la tabla se mostrara con franjas	`boolean`	false
border	especifica si la tabla tiene bordes verticales	`boolean`	false
size	tamaño de la tabla	`enum`	—
fit	especifica si el ancho de la columna se adapta automáticamente a su contenedor	`boolean`	true
show-header	especifica si la cabecera de la tabla es visible	`boolean`	true
highlight-current-row	especifica si la fila actual estara resaltada	`boolean`	false
current-row-key	clave de la fila actual, un ajuste unicamente de prop	`string` / `number`	—
row-class-name	función que devuelve nombres de clases personalizadas para las filas, o una cadena asignando el nombre de clase para cada fila	`Function` / `string`	—
row-style	función que devuelve el estilo personalizado para cada fila, o un objeto asignando el estilo personalizado para todas las filas	`Function` / `object`	—
cell-class-name	función que devuelve nombres de clases personalizadas para las celdas, o una cadena asignando el nombre de clase para cada celda	`Function` / `string`	—
cell-style	función que devuelve estilos personalizados para cada celda, o un objeto asignado el estilo personalizado para todas las celdas	`Function` / `object`	—
header-row-class-name	función que devuelve nombre de clases personalizadas para cada fila en la cabecera de la tabla, o una cadena asignando nombre de clase para todas las filas en la cabecera de la tabla	`Function` / `string`	—
header-row-style	función que devuelve estilos personalizados para cada una de las filas en la cabecera de la tabla, o un objeto asignando el estilo personalizado para todas las filas en la cabecera de la tabla	`Function` / `object`	—
header-cell-class-name	función que devuelve nombres de clases personalizada para cada celda en la cabecera de la tabla, o una cadena asignando el nombre de clase para todas las celda en la cabecera de la tabla	`Function` / `string`	—
header-cell-style	función que devuelve estilos personalizados para cada celda en la cabecera de la tabla, o un objeto asignando el estilo personalizado para todas las celdas en la cabecera de la tabla	`Function` / `object`	—
row-key	key de los datos de las filas, utilizada para optimizar el renderizado. Requerido si `reserve-selection` está activada o muestra los datos con formato de árbol. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used	`function` / `string`	—
empty-text	displayed text when data is empty. Puede personalizar esta área con `#empty`	`string`	Sin Datos
default-expand-all	especifica si todas las filas se expanden por defecto, solo funciona cuando la tabla tiene una columna type="expand" o contiene datos de estructura de árbol	`boolean`	false
expand-row-keys	establece las filas expandidas a través de esta propiedad, este valor es la clave de filas expandidas, debería establecer `row-key` antes de usar esta propiedad	`object`	—
default-sort	establece la columna y orden por defecto. la propiedad `prop` es utilizada para establecer la columna de ordenamiento por defecto, la propiedad `order` es utilizada para definir el tipo de orden por defecto	`object`	if `prop` is set, and `order` is not set, then `order` is default to ascending
tooltip-effect	el `effect` del tooltip por desbordamiento	`enum`	dark
tooltip-options 2.2.28	las opciones para el tooltip de desbordamiento, vea el componente de tooltip	`object`	`object`
show-summary	específica si debe mostrar la fila de resumen	`boolean`	false
sum-text	texto a mostrar para la primer columna de la fila de resumen	`string`	Sum
summary-method	método personalizado para resumen	`Function`	—
span-method	método que devuelve rowspan y colspan	`Function`	—
select-on-indeterminate	controla el comportamiento del checkbox maestro en tablas de selección múltiple cuando solo se seleccionan algunas filas (pero no todas). If true, all rows will be selected, else deselected	`boolean`	true
indent	indentación horizontal de los datos en el formato de estructura de árbol	`number`	16
lazy	si se realiza una carga perezosa de los datos	`boolean`	false
load	método para cargar datos de filas hijas, solo funciona cuando `lazy` es true	`Function`	—
tree-props	configuración para renderizar datos anidados	`object`	`object`
table-layout	sets the algorithm used to lay out table cells, rows, and columns	`enum`	fixed
scrollbar-always-on	si mostrar siempre la barra de desplazamiento	`boolean`	false
show-overflow-tooltip	whether to hide extra content and show them in a tooltip when hovering on the cell.It will affect all the table columns, refer to table tooltip-options	`boolean` / `object` 2.3.7	—
flexible 2.2.1	ensure main axis minimum-size doesn't follow the content	`boolean`	false

Eventos de la tabla

Nombre	Descripción	Tipo
select	se dispara cuando el usuario hace clic al checkbox (caja de selección) en una fila	`Function`
select-all	se dispara cando el usuario hace clic al checkbox (caja de selección) en la cabecera de la tabla	`Function`
selection-change	se dispara cuando la selección cambia	`Function`
cell-mouse-enter	se dispara cuando el ratón se desplaza dentro de una celda	`Function`
cell-mouse-leave	se dispara cuando el ratón se desplaza fuera de una celda	`Function`
cell-click	se dispara cuando se hace clic en una celda	`Function`
cell-dblclick	se dispara cuando se hace doble clic en una celda	`Function`
cell-contextmenu	se dispara cuando el usuario hace clic derecho en una celda	`Function`
row-click	se dispara cuando se hace clic en una fila	`Function`
row-contextmenu	se dispara cuando el usuario hace clic derecho en una fila	`Function`
row-dblclick	se dispara cuando se hace doble clic en una fila	`Function`
header-click	se dispara cuando se hace clic en una cabecera de columna	`Function`
header-contextmenu	se dispara cuando el usuario hace clic derecho en una cabecera de columna	`Function`
sort-change	se dispara cuando el orden de la tabla cambia	`Function`
filter-change	column's key. Si necesitas utilizar el evento filter-change, este atributo es obligatorio para identificar cuál columna está siendo filtrada	`Function`
current-change	se dispara cuando la fila actual cambia	`Function`
header-dragend	se dispara después de modificar el ancho de una columna arrastrando el borde de la cabecera	`Function`
expand-change	se activa cuando el usuario expande o colapsa una fila (para la tabla expansible, el segundo parámetro es expandedRows; para la tabla de árbol, el segundo parámetro es expanded)	`Function`

Slots de la tabla

Nombre	Descripción	Subetiquetas
default	personalizar contenido por defecto	Table-column
append	Contenidos a insertarse después de la última fila. Es posible que necesite este espacio si desea implementar scroll infinito para la tabla. Este slot se mostrará por encima de la fila de resumen si la hay.	—
empty	puedes personalizar el contenido cuando los datos están vacíos.	—

Table Exposes

Método	Descripción	Type
clearSelection	utilizado en selección múltiple de la tabla, limpia lo seleccionado	`Function`
getSelectionRows	devuelve las filas seleccionadas	`Function`
toggleRowSelection	usado en la tabla de selección múltiple, conmuta si se selecciona una fila determinada. Con el segundo parámetro, puede establecer directamente si esta fila está seleccionada	`Function`
toggleAllSelection	usado en la tabla de selección múltiple, alterna seleccionar todas o anular todas	`Function`
toggleRowExpansion	utilizado en la tabla expandible o en la tabla de árbol, conmuta si se expande una determinada fila. Con el segundo parámetro, puede establecer directamente si este registro se expande o colapsa	`Function`
setCurrentRow	utilizado en tabla con selección sencilla, establece una cierta fila como seleccionada. If called without any parameter, it will clear selection	`Function`
clearSort	borra el orden, restaurando los datos al orden original	`Function`
clearFilter	limpia los filtros de las columnas cuyas `columnKey` han sido pasadas. Si no hay parámetros, borrar todos los filtros	`Function`
doLayout	actualizar el diseño de la tabla. Cuando la visibilidad de la tabla cambia, puede necesitar llamar a este método para obtener un diseño correcto	`Function`
sort	ordena la tabla manualmente. La propiedad `prop` se utiliza para establecer la columna de ordenación, la propiedad `order` se utiliza para establecer el orden	`Function`
scrollTo	desplaza a un conjunto particular de coordenadas	`Function`
setScrollTop	fija posición de desplazamiento vertical	`Function`
setScrollLeft	fija posición de desplazamiento horizontal	`Function`

Table-column API

Atributos del Table-column

Nombre	Descripción	Type	Por defecto
type	tipo de columna. Si se establece a `selection`, la columna puede mostrar un checkbox. Si se establece a `index`, la columna puede mostrar el índice de la fila (iniciando desde 1). If set to `expand`, the column will display expand icon	`enum`	default
index	personaliza los índices para cada fila, funciona en columnas con `type=index`	`number` / `Function`	—
label	etiqueta de la columna	`string`	—
column-key	clave de la columna. Si necesita utilizar el evento `filter-change`, se usara este atributo para identificar que columna está siendo filtrada	`string`	—
prop	nombre del campo. También puede usar su alias: `property`	`string`	—
width	ancho de la columna	`string` / `number`	''
min-width	ancho mínimo de la columna. Columnas con `width` tienen un ancho fijo, mientras que las columnas con `min-width` tienen un ancho que se distribuye en proporción	`string` / `number`	''
fixed	específica si la columna se fija a la izquierda o a la derecha. Se fijará a la izquierda si es `true`	`enum` / `boolean`	false
render-header	función de renderizado para la cabecera de la tabla de esta columna	`Function`	—
sortable	si la columna puede ser ordenada. La ordenación remota se puede hacer estableciendo este atributo a 'custom' y escuchando el evento `sort-change` de la tabla	`boolean` / `string`	false
sort-method	método para ordenar, funciona cuando `sortable` está en `true`. Debería devolver un número, al igual que Array.sort	`Function`	—
sort-by	especifica cuál es la propiedad por la cual se va a ordenar, funciona cuando `sortable` es `true` y `sort-method` es `undefined`. Si se establece a un arreglo, la columna ordenara secuencialmente por la siguiente propiedad si la anterior es igual	`Function` / `string` / `object`	—
sort-orders	la estrategia para ordenar los datos, funciona cuando `sortable` es `true`. Acepta un arreglo, a medida que el usuario hace clic en el encabezado, la columna se ordena siguiendo la secuencia de los elementos del arreglo	`object`	['ascending', 'descending', null]
resizable	si el ancho de la columna puede ser redimensionado, funciona cuando `border` de `el-table` está en `true`	`boolean`	true
formatter	función que da formato al contenido de la celda	`function`	—
show-overflow-tooltip	si oculta contenido extra y lo muestra en un tooltip al pasar el cursor sobre la celda	`boolean` / `object` 2.2.28	undefined
align	alineación	`enum`	left
header-align	alineación de la cabecera de la tabla. Si se omite, se aplicará el valor del atributo anterior: `align`	`enum`	left
class-name	nombre de la clase Css de la celda en la columna	`string`	—
label-class-name	nombre de la clase Css de la etiqueta de esta columna	`string`	—
selectable	función que determina si una cierta fila puede ser seleccionada, funciona cuando `type` está en `selection`	`Function`	—
reserve-selection	específica si se reserva la selección después de actualizar los datos, funciona cuando `type` está en `selection`. Note que `row-key` es requerido para que esto funcione	`boolean`	false
filters	un arreglo de opciones para filtrado de datos. Para cada elemento en este arreglo, `text` y `value` son obligatorios	`object`	—
filter-placement	ubicación del menú desplegable de filtros	`enum`	—
filter-class-name 2.5.0	className for the filter dropdown	`string`	—
filter-multiple	si el filtrado de datos soporta múltiples opciones	`boolean`	true
filter-method	método para filtrado de datos. Si `filter-multiple` está activado, este método será llamado varias veces por cada fila, y se mostrará la fila si la llamada devuelve `true`	`function`	—
filtered-value	el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla es renderizado con `render-header`	`object`	—

Slots de Table-column

Nombre	Descripción	Type
default	Custom content for table columns	`object`
header	Custom content for table header	`object`

Type Declarations

Show declarations

interface Sort {
  prop: string
  order: 'ascending' | 'descending'
  init?: any
  silent?: any
}

interface TreeNode {
  expanded?: boolean
  loading?: boolean
  noLazyChildren?: boolean
  indent?: number
  level?: number
  display?: boolean
}

FAQ

¿Cómo usar la vista previa de la imagen en la tabla?

<el-table-column label="Thumbnail" width="180">
    <template #default="scope">
        <div style="display: flex; align-items: center">
            <el-image :preview-src-list="srcList"/>
        </div>
    </template>
</el-table-column>

PS: puesto que la columna fija está implementada por sticky, cuando tiene columnas fijas en la tabla, agregue el atributo preview-teleported en la imagen

¿Por qué la columna no se procesa cuando se usan plantillas DOM?

Typical issue: #5046 #5862 #6919

Esto se debe a que la especificación HTML solo permite que algunos elementos específicos omitan las etiquetas de cierre, los más comunes son <input> y <img>. Para todos los demás elementos, si omite la etiqueta de cierre, el analizador nativo HTML pensará que nunca terminó la etiqueta de apertura

For more details please refer to vue docs