Table

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

Tabla básica

La tabla básica es solo para mostrar datos.

Después de haber establecido el atributo data de el-table con un arreglo de objetos, puede usar la propiedad prop (el correspondiente a la clave de un objeto dentro del array data) en el-table-column para insertar datos a las columnas de la tabla, y establecer el atributo label para definir el nombre de la columna que se va a mostrar. También puede usar el atributo width para establecer el ancho de las columnas.

Tabla con franjas

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

El atributo stripe acepta un Boolean. Si es true, la tabla será con franjas.

Tabla con bordes

Por defecto, la tabla no tiene bordes verticales. Si lo necesita, puede establecer el atributo border a true.

Tabla con estados

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

Utilice row-class-name en el-table para agregar clases personalizadas a una fila específica. De esa manera podrá darle diseño con esas clases.

When the content is too long, it will break into multiple lines, you can use show-overflow-tooltip to keep it in one line.

Attribute show-overflow-tooltip, which accepts a Boolean value. Cuando se establece a true, el contenido extra se mostrará en un tooltip cuando se pase el cursor sobre la celda.

Tabla con cabecera fija

Cuando hay demasiadas filas, puede usar una cabecera fija.

Al configurar el atributo height de el-table, puede dejar fija la cabecera de la tabla sin necesidad de agregar otro código.

Tabla con columnas fijas

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

El atributo fixed es utilizado en el-table-column, este acepta un Boolean. Si es true, la columna será fijada a la izquierda. También acepta dos tipos: 'left' y 'right', ambos indican donde debe ser fijada la columna.

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.

Fije las columnas y cabecera al mismo tiempo combinando los dos ejemplos anteriores.

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.

Al configurar el atributo max-height de el-table, puede fijar la cabecera de la tabla. La barra de desplazamiento únicamente se mostrará si la altura sobrepasa el valor de la altura máxima.

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.

Solo necesita colocar el-table-column dentro de otro el-table-column, de esta forma logrará agruparles.

Tabla con cabecera de grupo fija

se puede usar la cabecera de grupo fija

El atributo fixed de la cabecera del grupo es determinado por el-table-column

Selección simple

La selección de una sola fila es posible.

La tabla permite la selección de una sola fila. Puede activarlo añadiendo el atributo highlight-current-row. Un evento llamado current-change será disparado cuando la selección de la fila cambie, sus parámetros son la fila antes y después del cambio: currentRow y oldCurrentRow. Si necesita mostrar el índice de la fila, puede agregar un nuevo el-table-column con el atributo type asignado al index y podrá ver el índice iniciando desde 1.

Selección multiple

También puede seleccionar múltiples filas.

After 2.8.3, toggleRowSelection supports the third parameter ignoreSelectable to determine whether to ignore the selectable attribute.

Activar la selección múltiple es sencillo: Solo debe agregar un el-table-column con su type establecido en selection.

vue

<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    row-key="id"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column label="Date" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="name" label="Name" width="120" />
    <el-table-column property="address" label="Address" />
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">
      Toggle selection status of second and third rows
    </el-button>
    <el-button @click="toggleSelection([tableData[1], tableData[2]], false)">
      Toggle selection status based on selectable
    </el-button>
    <el-button @click="toggleSelection()">Clear selection</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { TableInstance } from 'element-plus'

interface User {
  id: number
  date: string
  name: string
  address: string
}

const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])

const selectable = (row: User) => ![1, 2].includes(row.id)
const toggleSelection = (rows?: User[], ignoreSelectable?: boolean) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(
        row,
        undefined,
        ignoreSelectable
      )
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

const tableData: User[] = [
  {
    id: 1,
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 5,
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 6,
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 7,
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

Ordenar

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

Establezca el atributo sortable para ordenar los datos de una columna. Este acepta un Boolean con un valor por defecto false. Establezca el atributo default-sort para determinar la columna y orden por defecto. Para aplicar sus propias reglas de ordenamiento, utilice sort-method o sort-by. Si lo que necesita es ordenar de forma remota desde backend, establezca sortable a custom, y escuche el evento sort-change de la tabla. Al dispararse el evento, tendrá acceso a la columna ordenada y el tipo de orden para que pueda obtener los datos de la tabla ordenada desde su API. En este ejemplo utilizamos otro atributo llamado formatter para darle un formato al valor de ciertas columnas. Este acepta una función que tiene dos parámetros: row y column. Puede manejarlo de acuerdo a sus propias necesidades.

Filtros

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

Establezca el atributo filters y filter-method en el-table-column haciendo esta columna filtrable. filters es un arreglo, y filter-method es una función que decide que filas se muestra. Tiene tres parámetros: value, row y column.

vue

<template>
  <el-button @click="resetDateFilter">reset date filter</el-button>
  <el-button @click="clearFilter">reset all filters</el-button>
  <el-table ref="tableRef" row-key="date" :data="tableData" style="width: 100%">
    <el-table-column
      prop="date"
      label="Date"
      sortable
      width="180"
      column-key="date"
      :filters="[
        { text: '2016-05-01', value: '2016-05-01' },
        { text: '2016-05-02', value: '2016-05-02' },
        { text: '2016-05-03', value: '2016-05-03' },
        { text: '2016-05-04', value: '2016-05-04' },
      ]"
      :filter-method="filterHandler"
    />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" :formatter="formatter" />

    <el-table-column
      prop="tag"
      label="Tag"
      width="100"
      :filters="[
        { text: 'Home', value: 'Home' },
        { text: 'Office', value: 'Office' },
      ]"
      :filter-method="filterTag"
      filter-placement="bottom-end"
    >
      <template #default="scope">
        <el-tag
          :type="scope.row.tag === 'Home' ? 'primary' : 'success'"
          disable-transitions
          >{{ scope.row.tag }}</el-tag
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { TableColumnCtx, TableInstance } from 'element-plus'

interface User {
  date: string
  name: string
  address: string
  tag: string
}

const tableRef = ref<TableInstance>()

const resetDateFilter = () => {
  tableRef.value!.clearFilter(['date'])
}
const clearFilter = () => {
  tableRef.value!.clearFilter()
}
const formatter = (row: User, column: TableColumnCtx<User>) => {
  return row.address
}
const filterTag = (value: string, row: User) => {
  return row.tag === value
}
const filterHandler = (
  value: string,
  row: User,
  column: TableColumnCtx<User>
) => {
  const property = column['property']
  return row[property] === value
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Office',
  },
]
</script>

Plantilla de columna personalizada

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

Tiene acceso a la siguiente información: row, column, $index y store (gestor de estados de la tabla) por slots.

vue

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="Date" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="Name" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.name }}</div>
            <div>address: {{ scope.row.address }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.name }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { Timer } from '@element-plus/icons-vue'

interface User {
  date: string
  name: string
  address: string
}

const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

Tabla con cabecera personalizada

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

Puede personalizar el aspecto del encabezado con los slots.de header.

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.

After 2.9.7, preserve-expanded-content is added to control whether to preserve expanded row content in DOM when collapsed.

Puede activar la fila expandible estableciendo la propiedad type="expand" o con slots. La plantilla para el-table-column se mostrará como el contenido de la fila expandible, y puede acceder a los mismos atributos que cuando está usando slots en plantillas de columnas personalizadas.

switch parent border:

switch child border:

preserve expanded:

vue

<template>
  switch parent border: <el-switch v-model="parentBorder" /> switch child
  border: <el-switch v-model="childBorder" /> preserve expanded:
  <el-switch v-model="preserveExpanded" />
  <el-table
    :data="tableData"
    :border="parentBorder"
    :preserve-expanded-content="preserveExpanded"
    style="width: 100%"
  >
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p m="t-0 b-2">State: {{ props.row.state }}</p>
          <p m="t-0 b-2">City: {{ props.row.city }}</p>
          <p m="t-0 b-2">Address: {{ props.row.address }}</p>
          <p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
          <h3>Family</h3>
          <el-table :data="props.row.family" :border="childBorder">
            <el-table-column label="Name" prop="name" />
            <el-table-column label="State" prop="state" />
            <el-table-column label="City" prop="city" />
            <el-table-column label="Address" prop="address" />
            <el-table-column label="Zip" prop="zip" />
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="Date" prop="date" />
    <el-table-column label="Name" prop="name" />
  </el-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const parentBorder = ref(false)
const childBorder = ref(false)
const preserveExpanded = ref(false)
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
]
</script>

Datos con estructura de árbol y modo perezoso

Puede visualizar datos con una estructura de árbol. Cuando la fila contiene el campo children, se trata como datos anidados. Para renderizar datos anidados, la propiedad row-key es necesaria. Además, los datos de registros secundarios se pueden cargar de forma asíncrona. Establezca la propiedad lazy de la tabla a true y la función que usara a load. Especifique el atributo hasChildren en la fila para determinar qué fila contiene descendencia. Tanto children como hasChildren pueden configurarse a través de tree-props.

vue

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
    >
      <el-table-column prop="date" label="Date" sortable />
      <el-table-column prop="name" label="Name" sortable />
      <el-table-column prop="address" label="Address" sortable />
    </el-table>

    <el-table
      :data="tableData1"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="date" label="Date" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
interface User {
  id: number
  date: string
  name: string
  address: string
  hasChildren?: boolean
  children?: User[]
}

const load = (
  row: User,
  treeNode: unknown,
  resolve: (data: User[]) => void
) => {
  setTimeout(() => {
    resolve([
      {
        id: 31,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        id: 32,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])
  }, 1000)
}

const tableData: User[] = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
    children: [
      {
        id: 31,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        id: 32,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ],
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const tableData1: User[] = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    hasChildren: true,
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

Selectable tree 2.8.0

When treeProps.checkStrictly is true, the selection state of parent and child nodes is no longer associated, that is, when the parent node is selected, its child nodes will not be selected; when treeProps.checkStrictly is false, the selection state of parent and child nodes will be associated with the selection state of child nodes, that is, when the parent node is selected, all its child nodes will be selected.

truefalse

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.

Puede agregar la fila de resumen configurando show-summary a true. Por defecto, para la fila de resumen, la primera columna no resume nada, pero siempre muestra 'Sum' (puede configurar el texto mostrado usando sum-text), las otras columnas suman cada número en esa columna y los muestran. Por supuesto, puede definir un comportamiento propio para suma. To do so, pass a method to summary-method, which returns an array, and each element of the returned array will be displayed in the columns of the summary row, It can be a VNode or string. La segunda tabla de este ejemplo es una demostración detallada.

vue

<template>
  <el-table :data="tableData" border show-summary style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="amount1" sortable label="Amount 1" />
    <el-table-column prop="amount2" sortable label="Amount 2" />
    <el-table-column prop="amount3" sortable label="Amount 3" />
  </el-table>

  <el-table
    :data="tableData"
    border
    height="200"
    :summary-method="getSummaries"
    show-summary
    style="width: 100%; margin-top: 20px"
  >
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="amount1" label="Cost 1 ($)" />
    <el-table-column prop="amount2" label="Cost 2 ($)" />
    <el-table-column prop="amount3" label="Cost 3 ($)" />
  </el-table>
</template>

<script lang="ts" setup>
import { h } from 'vue'

import type { VNode } from 'vue'
import type { TableColumnCtx } from 'element-plus'

interface Product {
  id: string
  name: string
  amount1: string
  amount2: string
  amount3: number
}

interface SummaryMethodProps<T = Product> {
  columns: TableColumnCtx<T>[]
  data: T[]
}

const getSummaries = (param: SummaryMethodProps) => {
  const { columns, data } = param
  const sums: (string | VNode)[] = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h('div', { style: { textDecoration: 'underline' } }, [
        'Total Cost',
      ])
      return
    }
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = `$ ${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)}`
    } else {
      sums[index] = 'N/A'
    }
  })

  return sums
}

const tableData: Product[] = [
  {
    id: '12987122',
    name: 'Tom',
    amount1: '234',
    amount2: '3.2',
    amount3: 10,
  },
  {
    id: '12987123',
    name: 'Tom',
    amount1: '165',
    amount2: '4.43',
    amount3: 12,
  },
  {
    id: '12987124',
    name: 'Tom',
    amount1: '324',
    amount2: '1.9',
    amount3: 9,
  },
  {
    id: '12987125',
    name: 'Tom',
    amount1: '621',
    amount2: '2.2',
    amount3: 17,
  },
  {
    id: '12987126',
    name: 'Tom',
    amount1: '539',
    amount2: '4.1',
    amount3: 15,
  },
]
</script>

Rowspan and colspan

Configure rowspan y colspan para combinar las celdas

Utilice el atributo span-method para configurar rowspan y colspan. Este acepta un método, y pasa un objeto a ese método incluyendo la fila actual row, columna actual column, índice de fila actual rowIndex y índice de columna actual columnIndex. El método debe devolver un arreglo de dos números, el primer número siendo rowspan y el segundo colspan. También puede devolver un objeto con las propiedades rowspan y colspan.

vue

<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="amount1" sortable label="Amount 1" />
      <el-table-column prop="amount2" sortable label="Amount 2" />
      <el-table-column prop="amount3" sortable label="Amount 3" />
    </el-table>

    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="amount1" label="Amount 1" />
      <el-table-column prop="amount2" label="Amount 2" />
      <el-table-column prop="amount3" label="Amount 3" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import type { TableColumnCtx } from 'element-plus'

interface User {
  id: string
  name: string
  amount1: string
  amount2: string
  amount3: number
}

interface SpanMethodProps {
  row: User
  column: TableColumnCtx<User>
  rowIndex: number
  columnIndex: number
}

const arraySpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  if (rowIndex % 2 === 0) {
    if (columnIndex === 0) {
      return [1, 2]
    } else if (columnIndex === 1) {
      return [0, 0]
    }
  }
}

const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  if (columnIndex === 0) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
}

const tableData: User[] = [
  {
    id: '12987122',
    name: 'Tom',
    amount1: '234',
    amount2: '3.2',
    amount3: 10,
  },
  {
    id: '12987123',
    name: 'Tom',
    amount1: '165',
    amount2: '4.43',
    amount3: 12,
  },
  {
    id: '12987124',
    name: 'Tom',
    amount1: '324',
    amount2: '1.9',
    amount3: 9,
  },
  {
    id: '12987125',
    name: 'Tom',
    amount1: '621',
    amount2: '2.2',
    amount3: 17,
  },
  {
    id: '12987126',
    name: 'Tom',
    amount1: '539',
    amount2: '4.1',
    amount3: 15,
  },
]
</script>

Índice personalizado

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

Para personalizar el índice de la fila, utilice el atributo index en el-table-column con type=index. Si este es asignado a un número, todos los índices tendrán un desplazamiento desde ese número. También acepta un método con cada índice (iniciando desde 0) como un parámetro, y devuelve un valor que puede ser mostrado como índice.

Disposición de la tabla

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

fixedauto

You can use tooltip-formatter to customize the tooltip content.

vue

<template>
  <el-table
    :data="tableData"
    show-overflow-tooltip
    :tooltip-formatter="tableRowFormatter"
    style="width: 100%"
  >
    <el-table-column
      prop="address"
      label="extends table formatter"
      width="240"
    />
    <el-table-column
      prop="tags"
      label="formatter object"
      width="240"
      :tooltip-formatter="({ row }) => row.tags.join(', ')"
    >
      <template #default="{ row }">
        <el-tag
          v-for="tag in row.tags"
          :key="tag"
          class="tag-item"
          type="primary"
        >
          {{ tag }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="url"
      label="with vnode"
      width="240"
      :tooltip-formatter="withVNode"
    />
  </el-table>
</template>

<script lang="ts" setup>
import { h } from 'vue'
import { ElLink, type TableTooltipData } from 'element-plus'

type TableData = {
  address: string
  tags: string[]
  url: string
}

const tableData: TableData[] = [
  {
    address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
    tags: ['Office', 'Home', 'Park', 'Garden'],
    url: 'https://github.com/element-plus/element-plus/issues',
  },
  {
    address: '760 A Street, South Frankfield, Illinois',
    tags: ['error', 'warning', 'success', 'info'],
    url: 'https://github.com/element-plus/element-plus/pulls',
  },
  {
    address: 'Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen',
    tags: ['one', 'two', 'three', 'four', 'five'],
    url: 'https://github.com/element-plus/element-plus/discussions',
  },
  {
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
    tags: ['blue', 'white', 'dark', 'gray', 'red', 'bright'],
    url: 'https://github.com/element-plus/element-plus/actions',
  },
]

const tableRowFormatter = (data: TableTooltipData<TableData>) => {
  return `${data.cellValue}: table formatter`
}

const withVNode = (data: TableTooltipData<TableData>) => {
  return h(ElLink, { type: 'primary', href: data.cellValue }, () =>
    h('span', null, data.cellValue)
  )
}
</script>

<style scoped>
p {
  margin: 10px;
  padding: 0;
}
.tag-item + .tag-item {
  margin-left: 5px;
}
</style>

Table API

Atributos de la tabla

Nombre	Descripción	Tipo	Default
data	table data	`array`	[]
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	set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop.	`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`
append-filter-panel-to 2.8.4	which element the filter panels appends to	`string`	—
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
scrollbar-tabindex 2.8.3	body scrollbar's wrap container tabindex	`string` / `number`	—
allow-drag-last-column 2.9.2	whether to allow drag the last column	`boolean`	true
tooltip-formatter 2.9.4	customize tooltip content when using `show-overflow-tooltip`	`Function`	—
preserve-expanded-content 2.9.7	whether to preserve expanded row content in DOM when collapsed	`boolean`	false
native-scrollbar 2.10.5	whether to use native scrollbars	`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	triggers when the table's filter changes	`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`
scroll 2.9.0	Invoked after scrolled	`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`
columns 2.7.6	Get table columns context.	`array`
updateKeyChildren 2.8.4	used in lazy Table, must set `rowKey`, update key children	`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	column's key. 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	`array`	—
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`	—
tooltip-formatter 2.9.4	customize tooltip content when using `show-overflow-tooltip`	`Function`	—

Slots de Table-column

Nombre	Descripción	Type
default	Custom content for table columns	`object`
header	Custom content for table header	`object`
filter-icon 2.7.8	Custom content for filter icon	`object`
expand 2.10.0	Custom content for expand columns	`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
}

type DefaultRow = Record<PropertyKey, any>

type TableColumnCtx<T extends DefaultRow = DefaultRow> = {
  id: string
  realWidth: number | null
  type: string
  label: string
  className: string
  labelClassName: string
  property: string
  prop: string
  width?: string | number
  minWidth: string | number
  renderHeader: (data: CI<T>) => VNode
  sortable: boolean | string
  sortMethod: (a: T, b: T) => number
  sortBy: string | ((row: T, index: number, array?: T[]) => string) | string[]
  resizable: boolean
  columnKey: string
  rawColumnKey: string
  align: string
  headerAlign: string
  showOverflowTooltip?: boolean | TableOverflowTooltipOptions
  tooltipFormatter?: TableOverflowTooltipFormatter<T>
  fixed: boolean | string
  formatter: (
    row: T,
    column: TableColumnCtx<T>,
    cellValue: any,
    index: number
  ) => VNode | string
  selectable: (row: T, index: number) => boolean
  reserveSelection: boolean
  filterMethod: FilterMethods<T>
  filteredValue: string[]
  filters: Filters
  filterPlacement: string
  filterMultiple: boolean
  filterClassName: string
  index: number | ((index: number) => number)
  sortOrders: (TableSortOrder | null)[]
  renderCell: (data: any) => VNode | VNode[]
  colSpan: number
  rowSpan: number
  children?: TableColumnCtx<T>[]
  level: number
  filterable: boolean | FilterMethods<T> | Filters
  order: TableSortOrder | null
  isColumnGroup: boolean
  isSubColumn: boolean
  columns: TableColumnCtx<T>[]
  getColumnIndex: () => number
  no: number
  filterOpened?: boolean
  renderFilterIcon?: (scope: any) => VNode
  renderExpand?: (scope: any) => VNode
}

FAQ

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

vue

<template>
  <el-table-column width="180">
    <template #default="scope">
      <el-image preview-teleported :preview-src-list="srcList" />
    </template>
  </el-table-column>
</template>

¿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