mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
docs(table): standardized documentation (#2398)
This commit is contained in:
kooriookami
@@ -1088,7 +1088,7 @@ Filter the table to find desired data.
|
||||
### Custom column template
|
||||
|
||||
Customize table column so it can be integrated with other components.
|
||||
:::demo You have access to the following data: row, column, $index and store (state management of Table) by [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots).
|
||||
:::demo You have access to the following data: row, column, $index and store (state management of Table) by [slot](https://v3.vuejs.org/guide/component-slots.html).
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -1173,7 +1173,7 @@ Customize table column so it can be integrated with other components.
|
||||
### Table with custom header
|
||||
|
||||
Customize table header so it can be even more customized.
|
||||
:::demo You can customize how the header looks by header [scoped slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots).
|
||||
:::demo You can customize how the header looks by header [slots](https://v3.vuejs.org/guide/component-slots.html).
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -1248,7 +1248,7 @@ Customize table header so it can be even more customized.
|
||||
### Expandable row
|
||||
|
||||
When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.
|
||||
:::demo Activate expandable row by adding type="expand" and scoped slot. The template for el-table-column will be rendered as the contents of the expanded row, and you can access the same attributes as when you are using `Scoped slot` in custom column templates.
|
||||
:::demo Activate expandable row by adding type="expand" and slot. The template for el-table-column will be rendered as the contents of the expanded row, and you can access the same attributes as when you are using `slot` in custom column templates.
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -1813,38 +1813,38 @@ You can customize row index in `type=index` columns.
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|----------------|----------------------|-----------|-----------------------|----------|
|
||||
| data | Table data | array | — | — |
|
||||
| height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles | string/number | — | — |
|
||||
| max-height | Table's max-height. The legal value is a number or the height in px. | string/number | — | — |
|
||||
| height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles | string / number | — | — |
|
||||
| max-height | Table's max-height. The legal value is a number or the height in px. | string / number | — | — |
|
||||
| stripe | whether Table is striped | boolean | — | false |
|
||||
| border | whether Table has vertical border | boolean | — | false |
|
||||
| size | size of Table | string | medium / small / mini | — |
|
||||
| fit | whether width of column automatically fits its container | boolean | — | true |
|
||||
| show-header | whether Table header is visible | boolean | — | true |
|
||||
| highlight-current-row | whether current row is highlighted | boolean | — | false |
|
||||
| current-row-key | key of current row, a set only prop | string,number | — | — |
|
||||
| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function({row, rowIndex})/String | — | — |
|
||||
| row-style | function that returns custom style for a row, or an object assigning custom style for every row | Function({row, rowIndex})/Object | — | — |
|
||||
| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | Function({row, column, rowIndex, columnIndex})/String | — | — |
|
||||
| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | Function({row, column, rowIndex, columnIndex})/Object | — | — |
|
||||
| header-row-class-name | function that returns custom class names for a row in table header, or a string assigning class names for every row in table header | Function({row, rowIndex})/String | — | — |
|
||||
| header-row-style | function that returns custom style for a row in table header, or an object assigning custom style for every row in table header | Function({row, rowIndex})/Object | — | — |
|
||||
| header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | Function({row, column, rowIndex, columnIndex})/String | — | — |
|
||||
| header-cell-style | function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header | Function({row, column, rowIndex, columnIndex})/Object | — | — |
|
||||
| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. 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(row)/String | — | — |
|
||||
| empty-text | Displayed text when data is empty. You can customize this area with `#empty` | String | — | No Data |
|
||||
| default-expand-all | whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data | 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 | Array | — | |
|
||||
| default-sort | set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | Object | `order`: ascending, descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
|
||||
| tooltip-effect | tooltip `effect` property | String | dark/light | | dark |
|
||||
| show-summary | whether to display a summary row | Boolean | — | false |
|
||||
| sum-text | displayed text for the first column of summary row | String | — | Sum |
|
||||
| summary-method | custom summary method | Function({ columns, data }) | — | — |
|
||||
| span-method | method that returns rowspan and colspan | Function({ row, column, rowIndex, columnIndex }) | — | — |
|
||||
| select-on-indeterminate | controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected. | Boolean | — | true |
|
||||
| indent | horizontal indentation of tree data | Number | — | 16 |
|
||||
| lazy | whether to lazy loading data | Boolean| — | — |
|
||||
| load | method for loading child row data, only works when `lazy` is true | Function(row, treeNode, resolve) | — | — |
|
||||
| tree-props | configuration for rendering nested data| Object | — | { hasChildren: 'hasChildren', children: 'children' } |
|
||||
| current-row-key | key of current row, a set only prop | string / number | — | — |
|
||||
| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | function({ row, rowIndex }) / string | — | — |
|
||||
| row-style | function that returns custom style for a row, or an object assigning custom style for every row | function({ row, rowIndex }) / object | — | — |
|
||||
| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | function({ row, column, rowIndex, columnIndex }) / string | — | — |
|
||||
| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | function({ row, column, rowIndex, columnIndex }) / object | — | — |
|
||||
| header-row-class-name | function that returns custom class names for a row in table header, or a string assigning class names for every row in table header | function({ row, rowIndex }) / string | — | — |
|
||||
| header-row-style | function that returns custom style for a row in table header, or an object assigning custom style for every row in table header | function({ row, rowIndex }) / object | — | — |
|
||||
| header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | function({ row, column, rowIndex, columnIndex }) / string | — | — |
|
||||
| header-cell-style | function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header | function({ row, column, rowIndex, columnIndex }) / object | — | — |
|
||||
| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. 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(row) / string | — | — |
|
||||
| empty-text | Displayed text when data is empty. You can customize this area with `#empty` | string | — | No Data |
|
||||
| default-expand-all | whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data | 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 | array | — | — |
|
||||
| default-sort | set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | object | `order`: ascending / descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
|
||||
| tooltip-effect | tooltip `effect` property | string | dark / light | dark |
|
||||
| show-summary | whether to display a summary row | boolean | — | false |
|
||||
| sum-text | displayed text for the first column of summary row | string | — | Sum |
|
||||
| summary-method | custom summary method | function({ columns, data }) | — | — |
|
||||
| span-method | method that returns rowspan and colspan | function({ row, column, rowIndex, columnIndex }) | — | — |
|
||||
| select-on-indeterminate | controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected. | boolean | — | true |
|
||||
| indent | horizontal indentation of tree data | number | — | 16 |
|
||||
| lazy | whether to lazy loading data | boolean| — | — |
|
||||
| load | method for loading child row data, only works when `lazy` is true | function(row, treeNode, resolve) | — | — |
|
||||
| tree-props | configuration for rendering nested data| object | — | { hasChildren: 'hasChildren', children: 'children' } |
|
||||
|
||||
### Table Events
|
||||
| Event Name | Description | Parameters |
|
||||
@@ -1872,7 +1872,7 @@ You can customize row index in `type=index` columns.
|
||||
|------|--------|-------|
|
||||
| clearSelection | used in multiple selection Table, clear user selection | — |
|
||||
| toggleRowSelection | used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected |
|
||||
| toggleAllSelection | used in multiple selection Table, toggle select all and deselect all | - |
|
||||
| toggleAllSelection | used in multiple selection Table, toggle select all and deselect all | — |
|
||||
| toggleRowExpansion | used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded |
|
||||
| setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row |
|
||||
| clearSort | clear sorting, restore data to the original order | — |
|
||||
@@ -1888,33 +1888,33 @@ You can customize row index in `type=index` columns.
|
||||
### Table-column Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon. | string | selection/index/expand | — |
|
||||
| index | customize indices for each row, works on columns with `type=index` | number, Function(index) | - | - |
|
||||
| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon. | string | selection / index / expand | — |
|
||||
| index | customize indices for each row, works on columns with `type=index` | number / function(index) | — | — |
|
||||
| label | column label | string | — | — |
|
||||
| column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | — | — |
|
||||
| prop | field name. You can also use its alias: `property` | string | — | — |
|
||||
| width | column width | string | — | — |
|
||||
| min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string | — | — |
|
||||
| fixed | whether column is fixed at left/right. Will be fixed at left if `true` | string/boolean | true/left/right | — |
|
||||
| render-header | render function for table header of this column | Function({ column, $index }) | — | — |
|
||||
| sortable | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table | boolean / string | true / false / custom | false |
|
||||
| sort-method | sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort | Function(a, b) | — | — |
|
||||
| sort-by | specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal | Function(row, index)/String/Array | — | — |
|
||||
| width | column width | string / number | — | — |
|
||||
| min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string / number | — | — |
|
||||
| fixed | whether column is fixed at left / right. Will be fixed at left if `true` | string / boolean | true / 'left' / 'right' | — |
|
||||
| render-header | render function for table header of this column | function({ column, $index }) | — | — |
|
||||
| sortable | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table | boolean / string | true / false / 'custom' | false |
|
||||
| sort-method | sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort | function(a, b) | — | — |
|
||||
| sort-by | specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal | function(row, index) / string / array | — | — |
|
||||
| sort-orders | the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array | array | the elements in the array need to be one of the following: `ascending`, `descending` and `null` (restores to the original order) | ['ascending', 'descending', null] |
|
||||
| resizable | whether column width can be resized, works when `border` of `el-table` is `true` | boolean | — | false |
|
||||
| formatter | function that formats cell content | Function(row, column, cellValue, index) | — | — |
|
||||
| formatter | function that formats cell content | function(row, column, cellValue, index) | — | — |
|
||||
| show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean | — | false |
|
||||
| align | alignment | string | left/center/right | left |
|
||||
| header-align | alignment of the table header. If omitted, the value of the above `align` attribute will be applied | String | left/center/right | — |
|
||||
| align | alignment | string | left / center / right | left |
|
||||
| header-align | alignment of the table header. If omitted, the value of the above `align` attribute will be applied | string | left / center / right | — |
|
||||
| class-name | class name of cells in the column | string | — | — |
|
||||
| label-class-name | class name of the label of this column | string | — | — |
|
||||
| selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | Function(row, index) | — | — |
|
||||
| selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | function(row, index) | — | — |
|
||||
| reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection'. Note that `row-key` is required for this to work | boolean | — | false |
|
||||
| filters | an array of data filtering options. For each element in this array, `text` and `value` are required | Array[{ text, value }] | — | — |
|
||||
| filter-placement | placement for the filter dropdown | String | top / top-start / top-end / bottom / bottom-star t /bottom-end / left / left-start / left-end / right / right-start / right-end | — |
|
||||
| filter-multiple | whether data filtering supports multiple options | Boolean | — | true |
|
||||
| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | Function(value, row, column) | — | — |
|
||||
| filtered-value | filter value for selected data, might be useful when table header is rendered with `render-header` | Array | — | — |
|
||||
| filters | an array of data filtering options. For each element in this array, `text` and `value` are required | array[{ text, value }] | — | — |
|
||||
| filter-placement | placement for the filter dropdown | string | top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | — |
|
||||
| filter-multiple | whether data filtering supports multiple options | boolean | — | true |
|
||||
| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | function(value, row, column) | — | — |
|
||||
| filtered-value | filter value for selected data, might be useful when table header is rendered with `render-header` | array | — | — |
|
||||
|
||||
### Table-column Slots
|
||||
| Name | Description |
|
||||
|
||||
@@ -1089,7 +1089,7 @@ Filtra la tabla para encontrar la información que necesita.
|
||||
|
||||
Personalice la columna de la tabla para que pueda integrarse con otros componentes.
|
||||
|
||||
:::demo Tiene acceso a la siguiente información: row, column, $index, store (gestor de estados de la tabla) por [Scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots).
|
||||
:::demo Tiene acceso a la siguiente información: row, column, $index, store (gestor de estados de la tabla) por [slots](https://v3.vuejs.org/guide/component-slots.html).
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -1174,7 +1174,7 @@ Personalice la columna de la tabla para que pueda integrarse con otros component
|
||||
### Table con cabecera personalizada
|
||||
|
||||
Se puede personalizar el encabezado de la tabla para que se pueda adaptar aún más.
|
||||
:::demo Puede personalizar el aspecto del encabezado con header [scoped slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots).
|
||||
:::demo Puede personalizar el aspecto del encabezado con header [slots](https://v3.vuejs.org/guide/component-slots.html).
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -1250,7 +1250,7 @@ Se puede personalizar el encabezado de la tabla para que se pueda adaptar aún m
|
||||
|
||||
Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de desplazamiento horizontal, puede utilizar la característica de fila expandible.
|
||||
|
||||
:::demo Puede activar la fila expandible estableciendo la propiedad `type` a `expand` y Scoped Slots. La plantilla para `el-table-column` se representará como el contenido de la fila expandible, y puede acceder a algunos atributos cuando está usando `Scoped Slots` en plantillas de columna personalizadas.
|
||||
:::demo Puede activar la fila expandible estableciendo la propiedad `type` a `expand` y Slots. La plantilla para `el-table-column` se representará como el contenido de la fila expandible, y puede acceder a algunos atributos cuando está usando `Slots` en plantillas de columna personalizadas.
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -1818,38 +1818,38 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ---------------------- | ---------------------------------------- | ---------------------------------------- | ------------------------------ | ---------------------------------------- |
|
||||
| data | Datos de la tabla | array | — | — |
|
||||
| height | Altura de la tabla. Por defecto esta tiene un tamaño `auto`. Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, 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 | — | — |
|
||||
| height | Altura de la tabla. Por defecto esta tiene un tamaño `auto`. Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, 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 será en franjas | boolean | — | false |
|
||||
| border | especifica si la tabla tiene bordes verticales | boolean | — | false |
|
||||
| size | tamaño de la tabla | string | medium / small / mini | — |
|
||||
| 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 es resaltado | boolean | — | false |
|
||||
| current-row-key | clave de la fila actual, un ajuste de propiedad única | string,number | — | — |
|
||||
| row-class-name | función que devuelve nombres de clases personalizadas para una fila, o una cadena asignando nombres de clases para cada fila | Function({row, rowIndex})/String | — | — |
|
||||
| row-style | función que devuelve el estilo personalizado para una fila, o un objeto asignando estilos personalizado para cada fila | Function({row, rowIndex})/Object | — | — |
|
||||
| cell-class-name | función que devuelve nombres de clases personalizadas para una celda, o una cadena asignando nombres de clases para cada celda | Function({row, column, rowIndex, columnIndex})/String | — | — |
|
||||
| cell-style | función que devuelve estilos personalizados para una celda, o un objeto asignado a estilos personalizados para cada celda | Function({row, column, rowIndex, columnIndex})/Object | — | — |
|
||||
| header-row-class-name | función que devuelve nombre de clases personalizadas para una fila en la cabecera de la tabla, o una cadena asignando nombres de clases para cada fila en la cabecera de la tabla | Function({row, rowIndex})/String | — | — |
|
||||
| header-row-style | función que devuelve estilos personalizados para una fila en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada fila en la cabecera de la tabla | Function({row, rowIndex})/Object | — | — |
|
||||
| header-cell-class-name | función que devuelve nombre de clases personalizadas para una celda en la cabecera de la tabla, o una cadena asignando nombres de clases para cada celda en la cabecera de la tabla | Function({row, column, rowIndex, columnIndex})/String | — | — |
|
||||
| header-cell-style | función que devuelve estilos personalizados para una celda en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada celda en la cabecera de la tabla | Function({row, column, rowIndex, columnIndex})/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 del árbol. Cuando su tipo es String, se admite el acceso multinivel, por ejemplo, `user.info.id`, pero `user.info[0].id` no se admite, en cuyo caso se debe utilizar la función. | Function(row)/String | — | — |
|
||||
| empty-text | Texto mostrado cuando no existen datos. Puede personalizar esta área con `#empty` | String | — | No Data |
|
||||
| default-expand-all | especifica si todas las filas se expanden por defecto, solo funciona cuando la tabla tiene una columna `type="expand"` | 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 | Array | — | |
|
||||
| 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 | `order`: ascending, descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
|
||||
| tooltip-effect | propiedad `effect` para efectos en tooltip | String | dark/light | |
|
||||
| show-summary | especifica 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({ columns, data }) | — | — |
|
||||
| span-method | método que devuelve _rowspan_ y _colspan_ | Function({ row, column, rowIndex, columnIndex }) | — | — |
|
||||
| select-on-indeterminate | controla el comportamiento del checkbox maestro en tablas de selección múltiple cuando sólo se seleccionan algunas filas (pero no todas). Si es true, todas las filas serán seleccionadas, de lo contrario deseleccionadas. | Boolean | — | true |
|
||||
| indent | indentación horizontal de los datos en formato tree | Number | — | 16 |
|
||||
| lazy | si se realiza un lazy loading de los datos | Boolean | — | — |
|
||||
| load | método para cargar las filas de los hijos, solamente funciona cuando `lazy`es true | Function(row, treeNode, resolve) | — | — |
|
||||
| tree-props | configuración para renderizar datos anidados | Object | — | { hasChildren: 'hasChildren', children: 'children' } |
|
||||
| current-row-key | clave de la fila actual, un ajuste de propiedad única | string / number | — | — |
|
||||
| row-class-name | función que devuelve nombres de clases personalizadas para una fila, o una cadena asignando nombres de clases para cada fila | function({ row, rowIndex }) / string | — | — |
|
||||
| row-style | función que devuelve el estilo personalizado para una fila, o un objeto asignando estilos personalizado para cada fila | function({ row, rowIndex }) / object | — | — |
|
||||
| cell-class-name | función que devuelve nombres de clases personalizadas para una celda, o una cadena asignando nombres de clases para cada celda | function({ row, column, rowIndex, columnIndex }) / string | — | — |
|
||||
| cell-style | función que devuelve estilos personalizados para una celda, o un objeto asignado a estilos personalizados para cada celda | function({ row, column, rowIndex, columnIndex }) / object | — | — |
|
||||
| header-row-class-name | función que devuelve nombre de clases personalizadas para una fila en la cabecera de la tabla, o una cadena asignando nombres de clases para cada fila en la cabecera de la tabla | function({ row, rowIndex }) / string | — | — |
|
||||
| header-row-style | función que devuelve estilos personalizados para una fila en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada fila en la cabecera de la tabla | function({ row, rowIndex }) / object | — | — |
|
||||
| header-cell-class-name | función que devuelve nombre de clases personalizadas para una celda en la cabecera de la tabla, o una cadena asignando nombres de clases para cada celda en la cabecera de la tabla | function({ row, column, rowIndex, columnIndex }) / string | — | — |
|
||||
| header-cell-style | función que devuelve estilos personalizados para una celda en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada celda en la cabecera de la tabla | function({ row, column, rowIndex, columnIndex }) / 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 del árbol. Cuando su tipo es String, se admite el acceso multinivel, por ejemplo, `user.info.id`, pero `user.info[0].id` no se admite, en cuyo caso se debe utilizar la función. | function(row) / string | — | — |
|
||||
| empty-text | Texto mostrado cuando no existen datos. Puede personalizar esta área con `#empty` | string | — | No Data |
|
||||
| default-expand-all | especifica si todas las filas se expanden por defecto, solo funciona cuando la tabla tiene una columna `type="expand"` | 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 | array | — | — |
|
||||
| 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 | `order`: ascending / descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
|
||||
| tooltip-effect | propiedad `effect` para efectos en tooltip | string | dark / light | dark |
|
||||
| show-summary | especifica 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({ columns, data }) | — | — |
|
||||
| span-method | método que devuelve _rowspan_ y _colspan_ | function({ row, column, rowIndex, columnIndex }) | — | — |
|
||||
| select-on-indeterminate | controla el comportamiento del checkbox maestro en tablas de selección múltiple cuando sólo se seleccionan algunas filas (pero no todas). Si es true, todas las filas serán seleccionadas, de lo contrario deseleccionadas. | boolean | — | true |
|
||||
| indent | indentación horizontal de los datos en formato tree | number | — | 16 |
|
||||
| lazy | si se realiza un lazy loading de los datos | boolean | — | — |
|
||||
| load | método para cargar las filas de los hijos, solamente funciona cuando `lazy`es true | function(row, treeNode, resolve) | — | — |
|
||||
| tree-props | configuración para renderizar datos anidados | object | — | { hasChildren: 'hasChildren', children: 'children' } |
|
||||
|
||||
### Eventos de la tabla
|
||||
| Nombre del evento | Descripción | Parámetros |
|
||||
@@ -1877,7 +1877,7 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
|
||||
| ------------------ | ---------------------------------------- | ------------- |
|
||||
| clearSelection | utilizado en selección múltiple de la tabla, limpiar selección | — |
|
||||
| toggleRowSelection | utilizado en selección múltiple de la tabla, alterna si una cierta fila es seleccionada. Con el segundo parámetro, puede directamente establecer si la fila es seleccionada | row, selected |
|
||||
| toggleAllSelection | usado en Table de selección múltiple, toggle select all and deselect all | - |
|
||||
| toggleAllSelection | usado en Table de selección múltiple, toggle select all and deselect all | — |
|
||||
| toggleRowExpansion | utilizado en la Tabla expandible o en la Tabla de árbol, conmutar si se desglosa una determinada línea. Con el segundo parámetro, se puede fijar directamente si esta línea se desglosa o se pliega | row, expanded |
|
||||
| setCurrentRow | utilizado en tabla con selección sencilla, establece una cierta fila seleccionada. Si es llamado sin ningún parámetro, este puede limpiar la selección | row |
|
||||
| clearSort | limpiar ordenamiento, restaurar datos a orden original | — |
|
||||
@@ -1893,35 +1893,35 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
|
||||
### Atributos para las columnas de la tabla
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| --------------------- | ---------------------------------------- | --------------------------------- | ----------------------------- | ----------- |
|
||||
| type | tipo de la 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). Si se establece a `expand`, la columna puede mostrar un ícono para expandir. | string | selection/index/expand | — |
|
||||
| index | personalice los índices para cada fila, funciona en columnas con `type=index` | number, Function(index) | - | - |
|
||||
| type | tipo de la 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). Si se establece a `expand`, la columna puede mostrar un ícono para expandir. | string | selection / index / expand | — |
|
||||
| index | personalice los índices para cada fila, funciona en columnas con `type=index` | number / function(index) | — | — |
|
||||
| label | etiqueta de la columna | string | — | — |
|
||||
| column-key | clave de la columna. Si necesita utilizar el evento `filter-change`, necesita el atributo para identificar cual columna está siendo filtrada | string | string | — |
|
||||
| prop | nombre del campo. También puede usar su alias: `property` | string | — | — |
|
||||
| width | ancho de la columna | string | — | — |
|
||||
| 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 | — | — |
|
||||
| fixed | especifica si la columna se fija a la izquierda o a la derecha. Se fijará a la izquierda si es `true` | string/boolean | true/left/right | — |
|
||||
| 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 | especifica si la columna se fija a la izquierda o a la derecha. Se fijará a la izquierda si es `true` | string / boolean | true / 'left' / 'right' | — |
|
||||
| render-header | Función de renderizado para la cabecera de la tabla de esta columna | Function({ column, $index }) | — | — |
|
||||
| sortable | especifica que columna puede ser ordenado. El ordenamiento remoto puede ser hecho configurando el atributo `custom` y escucha al evento de tabla `sort-change` | boolean, string | true, false, custom | false |
|
||||
| sort-method | método de ordenamiento, funciona cuando `sortable` está en `true`. Debería devolver un número, al igual que Array.sort | Function(a, b) | — | — |
|
||||
| sort-by | especifica por cual propiedad de 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(row, index)/String/Array | — | — |
|
||||
| sortable | especifica que columna puede ser ordenado. El ordenamiento remoto puede ser hecho configurando el atributo `custom` y escucha al evento de tabla `sort-change` | boolean / string | true, false, 'custom' | false |
|
||||
| sort-method | método de ordenamiento, funciona cuando `sortable` está en `true`. Debería devolver un número, al igual que Array.sort | function(a, b) | — | — |
|
||||
| sort-by | especifica por cual propiedad de 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(row, index) / string / array | — | — |
|
||||
| sort-orders | el orden de las estrategias de ordenación utilizadas al ordenar los datos, funciona cuando `sortable` es `true`. Acepta un array, a medida que el usuario hace clic en el encabezado, la columna se ordena en el orden de los elementos del array. | array | los elementos en el arreglo necesitan ser uno de los siguientes: `ascending`, `descending` y `null` (restaura el orden original) | ['ascending', 'descending', null] |
|
||||
| resizable | especifica si el ancho de la columna puede ser redimensionado, funciona cuando `border` de `el-table` está en `true` | boolean | — | false |
|
||||
| formatter | función que formatea el contenido de la celda | Function(row, column, cellValue, index) | — | — |
|
||||
| formatter | función que formatea el contenido de la celda | function(row, column, cellValue, index) | — | — |
|
||||
| show-overflow-tooltip | especifica si el _tooltip_ debe ocultarse o mostrarse al hacer _hover_ en la celda | boolean | — | false |
|
||||
| align | alineación | string | left/center/right | left |
|
||||
| header-align | alineación de la cabecera de la tabla. Si se omite, se aplicará el valor del atributo anterior. | String | left/center/right | — |
|
||||
| align | alineación | string | left / center / right | left |
|
||||
| header-align | alineación de la cabecera de la tabla. Si se omite, se aplicará el valor del atributo anterior. | string | left / center / right | — |
|
||||
| class-name | nombre de clase de la celda en la columna | string | — | — |
|
||||
| label-class-name | nombre de clase de la etiqueta de esta columna | string | — | — |
|
||||
| selectable | función que determina si una cierta fila puede ser seleccionada, funciona cuando `type` esta en `selection` | Function(row, index) | — | — |
|
||||
| selectable | función que determina si una cierta fila puede ser seleccionada, funciona cuando `type` esta en `selection` | function(row, index) | — | — |
|
||||
| reserve-selection | especifica 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[{ text, value }] | — | — |
|
||||
| filter-placement | colocación para el menú desplegable del filtro | String | same as Tooltip's `placement` | — |
|
||||
| filter-multiple | especifica si el filtrado de datos soporta múltiples opciones | Boolean | — | true |
|
||||
| filter-method | método para filtrado de datos. Si `filter-multiple` está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve `true` | Function(value, row, column) | — | — |
|
||||
| filtered-value | el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla se representará con `render-header` | Array | — | — |
|
||||
| filters | un arreglo de opciones para filtrado de datos. Para cada elemento en este arreglo, `text` y `value` son obligatorios | array[{ text, value }] | — | — |
|
||||
| filter-placement | colocación para el menú desplegable del filtro | string | same as Tooltip's `placement` | — |
|
||||
| filter-multiple | especifica si el filtrado de datos soporta múltiples opciones | boolean | — | true |
|
||||
| filter-method | método para filtrado de datos. Si `filter-multiple` está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve `true` | function(value, row, column) | — | — |
|
||||
| filtered-value | el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla se representará con `render-header` | array | — | — |
|
||||
|
||||
### Table-column Scoped Slot
|
||||
### Table-column Slot
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| — | Contenido personalizado para las columnas de la tabla. El parámetro del scope es { row, column, $index } |
|
||||
|
||||
@@ -1089,7 +1089,7 @@ Vous pouvez filtrer la table pour obtenir rapidement les lignes désirées.
|
||||
|
||||
Vous pouvez customiser le contenu des colonnes afin de pouvoir utiliser d'autres composants.
|
||||
|
||||
:::demo Vous avez acccès aux données suivantes: `row`, `column`, `$index` et `store` (gestionnaire d'état de Table) grâce aux [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots).
|
||||
:::demo Vous avez acccès aux données suivantes: `row`, `column`, `$index` et `store` (gestionnaire d'état de Table) grâce aux [slot](https://v3.vuejs.org/guide/component-slots.html).
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -1175,7 +1175,7 @@ Vous pouvez customiser le contenu des colonnes afin de pouvoir utiliser d'autres
|
||||
|
||||
Vous pouvez également personnaliser le header de la table.
|
||||
|
||||
:::demo Vous pouvez personnaliser le header grâce aux [slots avec portée](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots).
|
||||
:::demo Vous pouvez personnaliser le header grâce aux [slots](https://v3.vuejs.org/guide/component-slots.html).
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -1820,38 +1820,38 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
|----------------|----------------------|-----------|-----------------------|----------|
|
||||
| data | Les données de la table. | array | — | — |
|
||||
| height | La hauteur de la table. Par défaut la hauteur est `auto`. Si sa valeur est un nombre, la hauteur est en px; si c'est un string, la valeur est assigné au style.height de l'élement. La hauteur est affectée par les styles externes. | string/number | — | — |
|
||||
| max-height | Table's max-height. The legal value is a number or the height in px. | string/number | — | — |
|
||||
| height | La hauteur de la table. Par défaut la hauteur est `auto`. Si sa valeur est un nombre, la hauteur est en px; si c'est un string, la valeur est assigné au style.height de l'élement. La hauteur est affectée par les styles externes. | string / number | — | — |
|
||||
| max-height | Table's max-height. The legal value is a number or the height in px. | string / number | — | — |
|
||||
| stripe | Si la table est rayée. | boolean | — | false |
|
||||
| border | Si la table à une bordure verticale. | boolean | — | false |
|
||||
| size | Taille de la table. | string | medium / small / mini | — |
|
||||
| fit | Si la largeur des colonnes s'adapte au conteneur. | boolean | — | true |
|
||||
| show-header | Si le header de la table est visible. | boolean | — | true |
|
||||
| highlight-current-row | Si la ligne courante est mise en valeur. | boolean | — | false |
|
||||
| current-row-key | Clé de la ligne actuelle. Propriété set-only. | string,number | — | — |
|
||||
| row-class-name | Fonction qui retourne un nom de classe pour chaque ligne. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne. | Function({row, rowIndex})/String | — | — |
|
||||
| row-style | Fonction qui retourne un style pour chaque ligne. Peut aussi être un objet assignant un style à chaque ligne. | Function({row, rowIndex})/Object | — | — |
|
||||
| cell-class-name | Fonction qui retourne un nom de classe pour chaque cellule. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule. | Function({row, column, rowIndex, columnIndex})/String | — | — |
|
||||
| cell-style | Fonction qui retourne un style pour chaque cellule. Peut aussi être un objet assignant un style à chaque cellule. | Function({row, column, rowIndex, columnIndex})/Object | — | — |
|
||||
| header-row-class-name | Fonction qui retourne un nom de classe pour chaque ligne de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne de header. | Function({row, rowIndex})/String | — | — |
|
||||
| header-row-style | Fonction qui retourne un style pour chaque ligne de header. Peut aussi être un objet assignant un style à chaque ligne de header. | Function({row, rowIndex})/Object | — | — |
|
||||
| header-cell-class-name | Fonction qui retourne un nom de classe pour chaque cellule de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule de header. | Function({row, column, rowIndex, columnIndex})/String | — | — |
|
||||
| header-cell-style | Fonction qui retourne un style pour chaque cellule de header. Peut aussi être un objet assignant un style à chaque cellule de header. | Function({row, column, rowIndex, columnIndex})/Object | — | — |
|
||||
| row-key | Clé de chaque ligne, utilisée pour optimiser le rendu. Requise si `reserve-selection` est activé. Quand c'est un `String`, l'accès multi-niveaux est supporté, e.g. `user.info.id`, mais `user.info[0].id` n'est pas supporté. Dans ce dernier cas une `Function` devrait être utilisée. | Function(row)/String | — | — |
|
||||
| empty-text | Texte à afficher quand il n'y a pas de données. Vous pouvez changer cette zone grâce à `#empty`. | String | — | No Data |
|
||||
| default-expand-all | whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data | Boolean | — | false |
|
||||
| expand-row-keys | Détermine les lignes qui sont étendues, contient les clés des lignes correspondantes. Vous devriez configurer `row-key` avant celle-ci. | Array | — | |
|
||||
| default-sort | Détermine l'ordre de tri par défaut. La propriété `prop` détermine la colonne par défaut, `order` détermine l'ordre par défaut. | Object | `order`: ascending, descending | Si `order` est absent, son défaut sera `ascending`. |
|
||||
| tooltip-effect | Propriété `effect` de Tooltip. | String | dark/light | | dark |
|
||||
| show-summary | Si une ligne de somme doit apparaître. | Boolean | — | false |
|
||||
| sum-text | Le label de la première cellule de la ligne de somme. | String | — | Sum |
|
||||
| summary-method | La méthode pour calculer la somme. | Function({ columns, data }) | — | — |
|
||||
| span-method | Méthode qui retourne les valeurs de colspan et rowspan. | Function({ row, column, rowIndex, columnIndex }) | — | — |
|
||||
| select-on-indeterminate | Contrôle le comportement de la checkbox globale dans les tables avec sélection multiple lorsque seulement certaines lignes sont sélectionnées. Si `true`, toutes les lignes sont sélectionnées. | Boolean | — | true |
|
||||
| indent | horizontal indentation of tree data | Number | — | 16 |
|
||||
| lazy | whether to lazy loading data | Boolean | — | — |
|
||||
| load | method for loading child row data, only works when `lazy` is true | Function({ row, treeNode, resolve }) | — | — |
|
||||
| tree-props | configuration for rendering nested data | Object | — | { hasChildren: 'hasChildren', children: 'children' } |
|
||||
| current-row-key | Clé de la ligne actuelle. Propriété set-only. | string / number | — | — |
|
||||
| row-class-name | Fonction qui retourne un nom de classe pour chaque ligne. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne. | function({ row, rowIndex }) / string | — | — |
|
||||
| row-style | Fonction qui retourne un style pour chaque ligne. Peut aussi être un objet assignant un style à chaque ligne. | function({ row, rowIndex }) / object | — | — |
|
||||
| cell-class-name | Fonction qui retourne un nom de classe pour chaque cellule. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule. | function({ row, column, rowIndex, columnIndex }) / string | — | — |
|
||||
| cell-style | Fonction qui retourne un style pour chaque cellule. Peut aussi être un objet assignant un style à chaque cellule. | function({ row, column, rowIndex, columnIndex }) / object | — | — |
|
||||
| header-row-class-name | Fonction qui retourne un nom de classe pour chaque ligne de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne de header. | function({ row, rowIndex }) / string | — | — |
|
||||
| header-row-style | Fonction qui retourne un style pour chaque ligne de header. Peut aussi être un objet assignant un style à chaque ligne de header. | function({ row, rowIndex }) / object | — | — |
|
||||
| header-cell-class-name | Fonction qui retourne un nom de classe pour chaque cellule de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule de header. | function({ row, column, rowIndex, columnIndex }) / string | — | — |
|
||||
| header-cell-style | Fonction qui retourne un style pour chaque cellule de header. Peut aussi être un objet assignant un style à chaque cellule de header. | function({ row, column, rowIndex, columnIndex }) / object | — | — |
|
||||
| row-key | Clé de chaque ligne, utilisée pour optimiser le rendu. Requise si `reserve-selection` est activé. Quand c'est un `String`, l'accès multi-niveaux est supporté, e.g. `user.info.id`, mais `user.info[0].id` n'est pas supporté. Dans ce dernier cas une `Function` devrait être utilisée. | function(row) / string | — | — |
|
||||
| empty-text | Texte à afficher quand il n'y a pas de données. Vous pouvez changer cette zone grâce à `#empty`. | string | — | No Data |
|
||||
| default-expand-all | whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data | boolean | — | false |
|
||||
| expand-row-keys | Détermine les lignes qui sont étendues, contient les clés des lignes correspondantes. Vous devriez configurer `row-key` avant celle-ci. | array | — | — |
|
||||
| default-sort | Détermine l'ordre de tri par défaut. La propriété `prop` détermine la colonne par défaut, `order` détermine l'ordre par défaut. | object | `order`: ascending / descending | Si `order` est absent, son défaut sera `ascending`. |
|
||||
| tooltip-effect | Propriété `effect` de Tooltip. | string | dark / light | dark |
|
||||
| show-summary | Si une ligne de somme doit apparaître. | boolean | — | false |
|
||||
| sum-text | Le label de la première cellule de la ligne de somme. | string | — | Sum |
|
||||
| summary-method | La méthode pour calculer la somme. | function({ columns, data }) | — | — |
|
||||
| span-method | Méthode qui retourne les valeurs de colspan et rowspan. | function({ row, column, rowIndex, columnIndex }) | — | — |
|
||||
| select-on-indeterminate | Contrôle le comportement de la checkbox globale dans les tables avec sélection multiple lorsque seulement certaines lignes sont sélectionnées. Si `true`, toutes les lignes sont sélectionnées. | boolean | — | true |
|
||||
| indent | horizontal indentation of tree data | number | — | 16 |
|
||||
| lazy | whether to lazy loading data | boolean | — | — |
|
||||
| load | method for loading child row data, only works when `lazy` is true | function({ row, treeNode, resolve }) | — | — |
|
||||
| tree-props | configuration for rendering nested data | object | — | { hasChildren: 'hasChildren', children: 'children' } |
|
||||
|
||||
### Évènements de Table
|
||||
|
||||
@@ -1881,7 +1881,7 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
|
||||
|------|--------|-------|
|
||||
| clearSelection | Dans les tables avec sélection multiple, efface la sélection. | — |
|
||||
| toggleRowSelection | Dans les tables avec sélection multiple, change la sélection d'une ligne. Grâce au deuxième paramètre vous pouvez directement décider si cette ligne est sélectionnée. | row, selected |
|
||||
| toggleAllSelection | Utilisé dans les tables à sélection multiples, toggle select all and deselect all | - |
|
||||
| toggleAllSelection | Utilisé dans les tables à sélection multiples, toggle select all and deselect all | — |
|
||||
| toggleRowExpansion | used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded |
|
||||
| setCurrentRow | Dans les tables à sélection simple, sélectionne une ligne. Sans paramètre la sélection est effacé. | row |
|
||||
| clearSort | Efface le tri. | — |
|
||||
@@ -1899,33 +1899,33 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
|
||||
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| type | Type de la colonne. Si mis à `selection`, la colonne affichera des checkbox. Si mis à `index`, la colonne affichera l'indice de la ligne (début à 1). Si mis à `expand`, affichera l'icône d'extension. | string | selection/index/expand | — |
|
||||
| index | Personnalise les indices de chaque ligne, marche avec les colonnes `type=index`. | number, Function(index) | - | - |
|
||||
| type | Type de la colonne. Si mis à `selection`, la colonne affichera des checkbox. Si mis à `index`, la colonne affichera l'indice de la ligne (début à 1). Si mis à `expand`, affichera l'icône d'extension. | string | selection / index / expand | — |
|
||||
| index | Personnalise les indices de chaque ligne, marche avec les colonnes `type=index`. | number / function(index) | — | — |
|
||||
| label | Label de la colonne. | string | — | — |
|
||||
| column-key | La clé de la colonne. Si vous avez besoin d'utiliser l'évènement filter-change, vous aurez besoin de cet attribut pour savoir quelle colonne est filtrée. | string | string | — | — |
|
||||
| prop | Nom du champ de l'objet de données. Alias: `property`. | string | — | — |
|
||||
| width | Largeur de la colonne. | string | — | — |
|
||||
| min-width | Largeur minimale de la colonne. Les colonnes avec `width` ont une largeur fixe, alors que celles avec `min-width` ont une largeur proportionnellement distribuée. | string | — | — |
|
||||
| fixed | Si la colonne est fixée à droite ou à gauche. Fixée à gauche si `true`. | string/boolean | true/left/right | — |
|
||||
| render-header | Fonction de rendu pour le header de cette colonne. | Function({ column, $index }) | — | — |
|
||||
| sortable | Si la colonne peut être triée. Tri dynamique possible en mettant à 'custom' et en écoutant l'évènement `sort-change` de Table. | boolean, string | true, false, custom | false |
|
||||
| sort-method | Méthode de tri, marche quand `sortable` est `true`. Doit retourner un nombre, tout comme Array.sort. | Function(a, b) | — | — |
|
||||
| sort-by | Détermine par quelle propriété effectuer le tri, marche quand `sortable` est `true` et `sort-method` est `undefined`. Si c'est un Array, sera triée par la propriété suivante si la précédente est équivalente. | Function(row, index)/String/Array | — | — |
|
||||
| width | Largeur de la colonne. | string / number | — | — |
|
||||
| min-width | Largeur minimale de la colonne. Les colonnes avec `width` ont une largeur fixe, alors que celles avec `min-width` ont une largeur proportionnellement distribuée. | string / number | — | — |
|
||||
| fixed | Si la colonne est fixée à droite ou à gauche. Fixée à gauche si `true`. | string / boolean | true / 'left' / 'right' | — |
|
||||
| render-header | Fonction de rendu pour le header de cette colonne. | function({ column, $index }) | — | — |
|
||||
| sortable | Si la colonne peut être triée. Tri dynamique possible en mettant à 'custom' et en écoutant l'évènement `sort-change` de Table. | boolean / string | true, false, 'custom' | false |
|
||||
| sort-method | Méthode de tri, marche quand `sortable` est `true`. Doit retourner un nombre, tout comme Array.sort. | function(a, b) | — | — |
|
||||
| sort-by | Détermine par quelle propriété effectuer le tri, marche quand `sortable` est `true` et `sort-method` est `undefined`. Si c'est un Array, sera triée par la propriété suivante si la précédente est équivalente. | function(row, index) / string / array | — | — |
|
||||
| sort-orders | Liste des stratégies de tri, marche quand `sortable` est `true`. Accepte un tableau. Lorsque l'utilisateur clique plusieurs fois sur le header, la colonne est triée dans l'ordre des stratégies indiquée. | array | Les élements du tableau doivent être parmi: `ascending`, `descending` et `null` (restaure l'état originel du tableau). | ['ascending', 'descending', null] |
|
||||
| resizable | Si la largeur de la colonne peut être modifiée, marche quand `border` de `el-table` est `true`. | boolean | — | false |
|
||||
| formatter | Fonction pour formater le contenu des cellules. | Function(row, column, cellValue, index) | — | — |
|
||||
| formatter | Fonction pour formater le contenu des cellules. | function(row, column, cellValue, index) | — | — |
|
||||
| show-overflow-tooltip | Si du contenu trop long doit être caché et affiché dans une tooltip quand la souris passe sur la cellule. | boolean | — | false |
|
||||
| align | Alignement. | string | left/center/right | left |
|
||||
| header-align | Alignement du header. Si omis, la valeur du `align` ci-dessus est appliqué. | String | left/center/right | — |
|
||||
| align | Alignement. | string | left / center / right | left |
|
||||
| header-align | Alignement du header. Si omis, la valeur du `align` ci-dessus est appliqué. | string | left / center / right | — |
|
||||
| class-name | Classe des cellules dans cette colonne. | string | — | — |
|
||||
| label-class-name | Classe du label de cette colonne. | string | — | — |
|
||||
| selectable | Détermine si certaines colonnes peuvent être sélectionnées, marche quand `type` est 'selection'. | Function(row, index) | — | — |
|
||||
| selectable | Détermine si certaines colonnes peuvent être sélectionnées, marche quand `type` est 'selection'. | function(row, index) | — | — |
|
||||
| reserve-selection | Si la sélection doit être conservée après rafraîchissement, marche quand `type` est 'selection'. Notez que `row-key` est requis. | boolean | — | false |
|
||||
| filters | Un tableau d'options de filtrage. Pour chaque élément, `text` et `value` sont requis. | Array[{ text, value }] | — | — |
|
||||
| filter-placement | Emplacement du menu du filtre. | String | Voir `placement` de Tooltip. | — |
|
||||
| filter-multiple | Si le filtrage supporte plusieurs options. | Boolean | — | true |
|
||||
| filter-method | Méthode de filtrage. Si `filter-multiple` est activé, cette méthode sera appelé plusieurs fois pour chaque ligne, qui sera affichée si dès qu'un `true` sera renvoyé. | Function(value, row, column) | — | — |
|
||||
| filtered-value | Valeur de filtre pour les colonnes sélectionnées, peut être utile quand le header est rendu avec `render-header`. | Array | — | — |
|
||||
| filters | Un tableau d'options de filtrage. Pour chaque élément, `text` et `value` sont requis. | array[{ text, value }] | — | — |
|
||||
| filter-placement | Emplacement du menu du filtre. | string | Voir `placement` de Tooltip. | — |
|
||||
| filter-multiple | Si le filtrage supporte plusieurs options. | boolean | — | true |
|
||||
| filter-method | Méthode de filtrage. Si `filter-multiple` est activé, cette méthode sera appelé plusieurs fois pour chaque ligne, qui sera affichée si dès qu'un `true` sera renvoyé. | function(value, row, column) | — | — |
|
||||
| filtered-value | Valeur de filtre pour les colonnes sélectionnées, peut être utile quand le header est rendu avec `render-header`. | array | — | — |
|
||||
|
||||
### Slot de Table-column
|
||||
|
||||
|
||||
@@ -1088,7 +1088,7 @@
|
||||
### カスタムカラムテンプレート
|
||||
|
||||
テーブルのカラムをカスタマイズして、他のコンポーネントと統合できるようにします。
|
||||
:::demo 行、列、$index、ストア(テーブルの状態管理)は、[Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots)でアクセスできます。
|
||||
:::demo 行、列、$index、ストア(テーブルの状態管理)は、[slot](https://v3.vuejs.org/guide/component-slots.html)でアクセスできます。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -1173,7 +1173,7 @@
|
||||
### カスタムヘッダー付きのテーブル
|
||||
|
||||
テーブルヘッダーをカスタマイズすることで、さらにカスタマイズできるようになります。
|
||||
:::demo ヘッダー[scoped slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots)でヘッダーの見え方をカスタマイズすることができます。
|
||||
:::demo ヘッダー[slots](https://v3.vuejs.org/guide/component-slots.html)でヘッダーの見え方をカスタマイズすることができます。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -1248,7 +1248,7 @@
|
||||
### 拡張可能な行
|
||||
|
||||
行の内容が長すぎて横スクロールバーを表示したくない場合は、拡張可能な行の機能を利用することができます。
|
||||
:::demo type="expand "とscoped slotを追加して、拡張可能な行を有効にします。el-table-columnのテンプレートは拡張された行の内容としてレンダリングされ、カスタムカラムテンプレートで `Scoped slot` を使用している場合と同じ属性にアクセスできます。
|
||||
:::demo type="expand" と slotを追加して、拡張可能な行を有効にします。el-table-columnのテンプレートは拡張された行の内容としてレンダリングされ、カスタムカラムテンプレートで `slot` を使用している場合と同じ属性にアクセスできます。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -1813,38 +1813,38 @@ rowspan と colspan を設定すると、セルをマージすることができ
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|----------------|----------------------|-----------|-----------------------|----------|
|
||||
| data | Table data | array | — | — |
|
||||
| height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles | string/number | — | — |
|
||||
| max-height | Table's max-height. The legal value is a number or the height in px. | string/number | — | — |
|
||||
| height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles | string / number | — | — |
|
||||
| max-height | Table's max-height. The legal value is a number or the height in px. | string / number | — | — |
|
||||
| stripe | whether Table is striped | boolean | — | false |
|
||||
| border | whether Table has vertical border | boolean | — | false |
|
||||
| size | size of Table | string | medium / small / mini | — |
|
||||
| fit | whether width of column automatically fits its container | boolean | — | true |
|
||||
| show-header | whether Table header is visible | boolean | — | true |
|
||||
| highlight-current-row | whether current row is highlighted | boolean | — | false |
|
||||
| current-row-key | key of current row, a set only prop | string,number | — | — |
|
||||
| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function({row, rowIndex})/String | — | — |
|
||||
| row-style | function that returns custom style for a row, or an object assigning custom style for every row | Function({row, rowIndex})/Object | — | — |
|
||||
| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | Function({row, column, rowIndex, columnIndex})/String | — | — |
|
||||
| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | Function({row, column, rowIndex, columnIndex})/Object | — | — |
|
||||
| header-row-class-name | function that returns custom class names for a row in table header, or a string assigning class names for every row in table header | Function({row, rowIndex})/String | — | — |
|
||||
| header-row-style | function that returns custom style for a row in table header, or an object assigning custom style for every row in table header | Function({row, rowIndex})/Object | — | — |
|
||||
| header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | Function({row, column, rowIndex, columnIndex})/String | — | — |
|
||||
| header-cell-style | function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header | Function({row, column, rowIndex, columnIndex})/Object | — | — |
|
||||
| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. 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(row)/String | — | — |
|
||||
| empty-text | Displayed text when data is empty. You can customize this area with `#empty` | String | — | No Data |
|
||||
| default-expand-all | whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data | 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 | Array | — | |
|
||||
| default-sort | set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | Object | `order`: ascending, descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
|
||||
| tooltip-effect | tooltip `effect` property | String | dark/light | | dark |
|
||||
| show-summary | whether to display a summary row | Boolean | — | false |
|
||||
| sum-text | displayed text for the first column of summary row | String | — | Sum |
|
||||
| summary-method | custom summary method | Function({ columns, data }) | — | — |
|
||||
| span-method | method that returns rowspan and colspan | Function({ row, column, rowIndex, columnIndex }) | — | — |
|
||||
| select-on-indeterminate | controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected. | Boolean | — | true |
|
||||
| indent | horizontal indentation of tree data | Number | — | 16 |
|
||||
| lazy | whether to lazy loading data | Boolean| — | — |
|
||||
| load | method for loading child row data, only works when `lazy` is true | Function(row, treeNode, resolve) | — | — |
|
||||
| tree-props | configuration for rendering nested data| Object | — | { hasChildren: 'hasChildren', children: 'children' } |
|
||||
| current-row-key | key of current row, a set only prop | string / number | — | — |
|
||||
| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | function({ row, rowIndex }) / string | — | — |
|
||||
| row-style | function that returns custom style for a row, or an object assigning custom style for every row | function({ row, rowIndex }) / object | — | — |
|
||||
| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | function({ row, column, rowIndex, columnIndex }) / string | — | — |
|
||||
| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | function({ row, column, rowIndex, columnIndex }) / object | — | — |
|
||||
| header-row-class-name | function that returns custom class names for a row in table header, or a string assigning class names for every row in table header | function({ row, rowIndex }) / string | — | — |
|
||||
| header-row-style | function that returns custom style for a row in table header, or an object assigning custom style for every row in table header | function({ row, rowIndex }) / object | — | — |
|
||||
| header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | function({ row, column, rowIndex, columnIndex }) / string | — | — |
|
||||
| header-cell-style | function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header | function({ row, column, rowIndex, columnIndex }) / object | — | — |
|
||||
| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. 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(row) / string | — | — |
|
||||
| empty-text | Displayed text when data is empty. You can customize this area with `#empty` | string | — | No Data |
|
||||
| default-expand-all | whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data | 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 | array | — | — |
|
||||
| default-sort | set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | object | `order`: ascending / descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
|
||||
| tooltip-effect | tooltip `effect` property | string | dark / light | dark |
|
||||
| show-summary | whether to display a summary row | boolean | — | false |
|
||||
| sum-text | displayed text for the first column of summary row | string | — | Sum |
|
||||
| summary-method | custom summary method | function({ columns, data }) | — | — |
|
||||
| span-method | method that returns rowspan and colspan | function({ row, column, rowIndex, columnIndex }) | — | — |
|
||||
| select-on-indeterminate | controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected. | boolean | — | true |
|
||||
| indent | horizontal indentation of tree data | number | — | 16 |
|
||||
| lazy | whether to lazy loading data | boolean| — | — |
|
||||
| load | method for loading child row data, only works when `lazy` is true | function(row, treeNode, resolve) | — | — |
|
||||
| tree-props | configuration for rendering nested data| object | — | { hasChildren: 'hasChildren', children: 'children' } |
|
||||
|
||||
### Table Events
|
||||
| Event Name | Description | Parameters |
|
||||
@@ -1872,7 +1872,7 @@ rowspan と colspan を設定すると、セルをマージすることができ
|
||||
|------|--------|-------|
|
||||
| clearSelection | used in multiple selection Table, clear user selection | — |
|
||||
| toggleRowSelection | used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected |
|
||||
| toggleAllSelection | used in multiple selection Table, toggle select all and deselect all | - |
|
||||
| toggleAllSelection | used in multiple selection Table, toggle select all and deselect all | — |
|
||||
| toggleRowExpansion | used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded |
|
||||
| setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row |
|
||||
| clearSort | clear sorting, restore data to the original order | — |
|
||||
@@ -1880,7 +1880,7 @@ rowspan と colspan を設定すると、セルをマージすることができ
|
||||
| doLayout | refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout | — |
|
||||
| sort | sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order | prop: string, order: string |
|
||||
|
||||
### Table Slot
|
||||
### Table Slots
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| append | Contents to be inserted after the last row. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one. |
|
||||
@@ -1888,35 +1888,35 @@ rowspan と colspan を設定すると、セルをマージすることができ
|
||||
### Table-column Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon. | string | selection/index/expand | — |
|
||||
| index | customize indices for each row, works on columns with `type=index` | number, Function(index) | - | - |
|
||||
| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon. | string | selection / index / expand | — |
|
||||
| index | customize indices for each row, works on columns with `type=index` | number / function(index) | — | — |
|
||||
| label | column label | string | — | — |
|
||||
| column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | string | — | — |
|
||||
| column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | — | — |
|
||||
| prop | field name. You can also use its alias: `property` | string | — | — |
|
||||
| width | column width | string | — | — |
|
||||
| min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string | — | — |
|
||||
| fixed | whether column is fixed at left/right. Will be fixed at left if `true` | string/boolean | true/left/right | — |
|
||||
| render-header | render function for table header of this column | Function({ column, $index }) | — | — |
|
||||
| sortable | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table | boolean, string | true, false, custom | false |
|
||||
| sort-method | sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort | Function(a, b) | — | — |
|
||||
| sort-by | specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal | Function(row, index)/String/Array | — | — |
|
||||
| width | column width | string / number | — | — |
|
||||
| min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string / number | — | — |
|
||||
| fixed | whether column is fixed at left / right. Will be fixed at left if `true` | string / boolean | true / 'left' / 'right' | — |
|
||||
| render-header | render function for table header of this column | function({ column, $index }) | — | — |
|
||||
| sortable | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table | boolean / string | true / false / 'custom' | false |
|
||||
| sort-method | sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort | function(a, b) | — | — |
|
||||
| sort-by | specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal | function(row, index) / string / array | — | — |
|
||||
| sort-orders | the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array | array | the elements in the array need to be one of the following: `ascending`, `descending` and `null` (restores to the original order) | ['ascending', 'descending', null] |
|
||||
| resizable | whether column width can be resized, works when `border` of `el-table` is `true` | boolean | — | false |
|
||||
| formatter | function that formats cell content | Function(row, column, cellValue, index) | — | — |
|
||||
| formatter | function that formats cell content | function(row, column, cellValue, index) | — | — |
|
||||
| show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean | — | false |
|
||||
| align | alignment | string | left/center/right | left |
|
||||
| header-align | alignment of the table header. If omitted, the value of the above `align` attribute will be applied | String | left/center/right | — |
|
||||
| align | alignment | string | left / center / right | left |
|
||||
| header-align | alignment of the table header. If omitted, the value of the above `align` attribute will be applied | string | left / center / right | — |
|
||||
| class-name | class name of cells in the column | string | — | — |
|
||||
| label-class-name | class name of the label of this column | string | — | — |
|
||||
| selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | Function(row, index) | — | — |
|
||||
| selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | function(row, index) | — | — |
|
||||
| reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection'. Note that `row-key` is required for this to work | boolean | — | false |
|
||||
| filters | an array of data filtering options. For each element in this array, `text` and `value` are required | Array[{ text, value }] | — | — |
|
||||
| filter-placement | placement for the filter dropdown | String | same as Tooltip's `placement` | — |
|
||||
| filter-multiple | whether data filtering supports multiple options | Boolean | — | true |
|
||||
| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | Function(value, row, column) | — | — |
|
||||
| filtered-value | filter value for selected data, might be useful when table header is rendered with `render-header` | Array | — | — |
|
||||
| filters | an array of data filtering options. For each element in this array, `text` and `value` are required | array[{ text, value }] | — | — |
|
||||
| filter-placement | placement for the filter dropdown | string | top / top-start / top-end / bottom / bottom-star t /bottom-end / left / left-start / left-end / right / right-start / right-end | — |
|
||||
| filter-multiple | whether data filtering supports multiple options | boolean | — | true |
|
||||
| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | function(value, row, column) | — | — |
|
||||
| filtered-value | filter value for selected data, might be useful when table header is rendered with `render-header` | array | — | — |
|
||||
|
||||
### Table-column Scoped Slot
|
||||
### Table-column Slots
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| — | Custom content for table columns. The scope parameter is { row, column, $index } |
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
基础的表格展示用法。
|
||||
|
||||
:::demo 当`el-table`元素中注入`data`对象数组后，在`el-table-column`中用`prop`属性来对应对象中的键名即可填入数据，用`label`属性来定义表格的列名。可以使用`width`属性来定义列宽。
|
||||
:::demo 当 `el-table` 元素中注入 `data` 对象数组后，在 `el-table-column` 中用 `prop` 属性来对应对象中的键名即可填入数据，用 `label` 属性来定义表格的列名。可以使用 `width` 属性来定义列宽。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -61,7 +61,7 @@
|
||||
|
||||
使用带斑马纹的表格，可以更容易区分出不同行的数据。
|
||||
|
||||
:::demo `stripe`属性可以创建带斑马纹的表格。它接受一个`Boolean`，默认为`false`，设置为`true`即为启用。
|
||||
:::demo `stripe` 属性可以创建带斑马纹的表格。它接受一个 `Boolean`，默认为 `false`，设置为 `true` 即为启用。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -115,7 +115,7 @@
|
||||
|
||||
### 带边框表格
|
||||
|
||||
:::demo 默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用`border`属性，它接受一个`Boolean`，设置为`true`即可启用。
|
||||
:::demo 默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用 `border` 属性，它接受一个 `Boolean`，设置为 `true` 即可启用。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -247,7 +247,7 @@
|
||||
|
||||
纵向内容过多时，可选择固定表头。
|
||||
|
||||
:::demo 只要在`el-table`元素中定义了`height`属性，即可实现固定表头的表格，而不需要额外的代码。
|
||||
:::demo 只要在 `el-table` 元素中定义了 `height` 属性，即可实现固定表头的表格，而不需要额外的代码。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -316,7 +316,7 @@
|
||||
|
||||
横向内容过多时，可选择固定列。
|
||||
|
||||
:::demo 固定列需要使用`fixed`属性，它接受 Boolean 值或者`left` `right`，表示左边固定还是右边固定。
|
||||
:::demo 固定列需要使用 `fixed` 属性，它接受 Boolean 值或者 `left` `right`，表示左边固定还是右边固定。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -522,7 +522,7 @@
|
||||
|
||||
当数据量动态变化时，可以为 Table 设置一个最大高度。
|
||||
|
||||
:::demo 通过设置`max-height`属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。
|
||||
:::demo 通过设置 `max-height` 属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -646,7 +646,7 @@
|
||||
|
||||
数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。
|
||||
|
||||
:::demo 只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。
|
||||
:::demo 只需要在 `el-table-column` 里面嵌套 `el-table-column`，就可以实现多级表头。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -753,7 +753,7 @@
|
||||
|
||||
选择单行数据时使用色块表示。
|
||||
|
||||
:::demo Table 组件提供了单选的支持，只需要配置`highlight-current-row`属性即可实现单选。之后由`current-change`事件来管理选中时触发的事件，它会传入`currentRow`，`oldCurrentRow`。如果需要显示索引，可以增加一列`el-table-column`，设置`type`属性为`index`即可显示从 1 开始的索引号。
|
||||
:::demo Table 组件提供了单选的支持，只需要配置 `highlight-current-row` 属性即可实现单选。之后由 `current-change` 事件来管理选中时触发的事件，它会传入 `currentRow`，`oldCurrentRow`。如果需要显示索引，可以增加一列 `el-table-column`，设置 `type` 属性为 `index` 即可显示从 1 开始的索引号。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -829,7 +829,7 @@
|
||||
|
||||
选择多行数据时使用 Checkbox。
|
||||
|
||||
:::demo 实现多选非常简单: 手动添加一个`el-table-column`，设`type`属性为`selection`即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用`show-overflow-tooltip`属性，它接受一个`Boolean`，为`true`时多余的内容会在 hover 时以 tooltip 的形式显示出来。
|
||||
:::demo 实现多选非常简单: 手动添加一个 `el-table-column`，设 `type` 属性为 `selection` 即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用 `show-overflow-tooltip` 属性，它接受一个 `Boolean`，为 `true` 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -924,7 +924,7 @@
|
||||
|
||||
对表格进行排序，可快速查找或对比数据。
|
||||
|
||||
:::demo 在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。可以通过 Table 的`default-sort`属性设置默认的排序列和排序顺序。可以使用`sort-method`或者`sort-by`使用自定义的排序规则。如果需要后端排序，需将`sortable`设置为`custom`，同时在 Table 上监听`sort-change`事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。
|
||||
:::demo 在列中设置 `sortable` 属性即可实现以该列为基准的排序，接受一个 `Boolean`，默认为 `false`。可以通过 Table 的 `default-sort` 属性设置默认的排序列和排序顺序。可以使用 `sort-method` 或者 `sort-by` 使用自定义的排序规则。如果需要后端排序，需将 `sortable` 设置为 `custom`，同时在 Table 上监听 `sort-change` 事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了 `formatter` 属性，它用于格式化指定列的值，接受一个 `Function`，会传入两个参数：`row` 和 `column`，可以根据自己的需求进行处理。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -989,7 +989,7 @@
|
||||
|
||||
对表格进行筛选，可快速查找到自己想看的数据。
|
||||
|
||||
:::demo 在列中设置`filters` `filter-method`属性即可开启该列的筛选，filters 是一个数组，`filter-method`是一个方法，它用于决定某些数据是否显示，会传入三个参数：`value`, `row` 和 `column`。
|
||||
:::demo 在列中设置 `filters` `filter-method` 属性即可开启该列的筛选，filters 是一个数组，`filter-method` 是一个方法，它用于决定某些数据是否显示，会传入三个参数：`value`, `row` 和 `column`。
|
||||
```html
|
||||
<template>
|
||||
<el-button @click="resetDateFilter">清除日期过滤器</el-button>
|
||||
@@ -1088,7 +1088,7 @@
|
||||
### 自定义列模板
|
||||
|
||||
自定义列的显示内容，可组合其他组件使用。
|
||||
:::demo 通过 `Scoped slot` 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。
|
||||
:::demo 通过 `slot` 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -1172,7 +1172,7 @@
|
||||
### 展开行
|
||||
|
||||
当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。
|
||||
:::demo 通过设置 type="expand" 和 `Scoped slot` 可以开启展开行功能，`el-table-column` 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 `Scoped slot` 相同。
|
||||
:::demo 通过设置 `type="expand"` 和 `slot` 可以开启展开行功能，`el-table-column` 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 `slot` 相同。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -1424,7 +1424,7 @@
|
||||
|
||||
表头支持自定义。
|
||||
|
||||
:::demo 通过设置 [Scoped slot](https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD) 来自定义表头。
|
||||
:::demo 通过设置 [slot](https://v3.vuejs.org/guide/component-slots.html) 来自定义表头。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -1499,7 +1499,7 @@
|
||||
### 表尾合计行
|
||||
|
||||
若表格展示的是各类数字，可以在表尾显示各列的合计。
|
||||
:::demo 将`show-summary`设置为`true`就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过`sum-text`配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用`summary-method`并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。
|
||||
:::demo 将 `show-summary` 设置为 `true` 就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过 `sum-text` 配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用 `summary-method` 并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
@@ -1637,7 +1637,7 @@
|
||||
### 合并行或列
|
||||
|
||||
多行或多列共用一个数据时，可以合并行或列。
|
||||
:::demo 通过给`table`传入`span-method`方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行`row`、当前列`column`、当前行号`rowIndex`、当前列号`columnIndex`四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表`rowspan`，第二个元素代表`colspan`。 也可以返回一个键名为`rowspan`和`colspan`的对象。
|
||||
:::demo 通过给 `table` 传入 `span-method` 方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行 `row`、当前列 `column`、当前行号 `rowIndex`、当前列号 `columnIndex` 四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表 `rowspan`，第二个元素代表 `colspan`。 也可以返回一个键名为 `rowspan` 和 `colspan` 的对象。
|
||||
|
||||
```html
|
||||
<template>
|
||||
@@ -1856,38 +1856,38 @@
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| data | 显示的数据 | array | — | — |
|
||||
| height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 | string/number | — | — |
|
||||
| max-height | Table 的最大高度。合法的值为数字或者单位为 px 的高度。 | string/number | — | — |
|
||||
| height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 | string / number | — | — |
|
||||
| max-height | Table 的最大高度。合法的值为数字或者单位为 px 的高度。 | string / number | — | — |
|
||||
| stripe | 是否为斑马纹 table | boolean | — | false |
|
||||
| border | 是否带有纵向边框 | boolean | — | false |
|
||||
| size | Table 的尺寸 | string | medium / small / mini | — |
|
||||
| fit | 列的宽度是否自撑开 | boolean | — | true |
|
||||
| show-header | 是否显示表头 | boolean | — | true |
|
||||
| highlight-current-row | 是否要高亮当前行 | boolean | — | false |
|
||||
| current-row-key | 当前行的 key，只写属性 | String,Number | — | — |
|
||||
| row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |
|
||||
| row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |
|
||||
| cell-class-name | 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — |
|
||||
| cell-style | 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | — | — |
|
||||
| header-row-class-name | 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |
|
||||
| header-row-style | 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |
|
||||
| header-cell-class-name | 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — |
|
||||
| header-cell-style | 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | — | — |
|
||||
| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：`user.info.id`，但不支持 `user.info[0].id`，此种情况请使用 `Function`。 | Function(row)/String | — | — |
|
||||
| empty-text | 空数据时显示的文本内容，也可以通过 `#empty` 设置 | String | — | 暂无数据 |
|
||||
| default-expand-all | 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 | Boolean | — | false |
|
||||
| expand-row-keys | 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。| Array | — | |
|
||||
| default-sort | 默认的排序列的 prop 和顺序。它的`prop`属性指定默认的排序的列，`order`指定默认排序的顺序| Object | `order`: ascending, descending | 如果只指定了`prop`, 没有指定`order`, 则默认顺序是ascending |
|
||||
| tooltip-effect | tooltip `effect` 属性 | String | dark/light | | dark |
|
||||
| show-summary | 是否在表尾显示合计行 | Boolean | — | false |
|
||||
| sum-text | 合计行第一列的文本 | String | — | 合计 |
|
||||
| summary-method | 自定义的合计计算方法 | Function({ columns, data }) | — | — |
|
||||
| span-method | 合并行或列的计算方法 | Function({ row, column, rowIndex, columnIndex }) | — | — |
|
||||
| select-on-indeterminate | 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 | Boolean | — | true |
|
||||
| indent | 展示树形数据时，树节点的缩进 | Number | — | 16 |
|
||||
| lazy | 是否懒加载子节点数据 | Boolean | — | — |
|
||||
| load | 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息 | Function(row, treeNode, resolve) | — | — |
|
||||
| tree-props | 渲染嵌套数据的配置选项 | Object | — | { hasChildren: 'hasChildren', children: 'children' } |
|
||||
| current-row-key | 当前行的 key，只写属性 | string / number | — | — |
|
||||
| row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | function({ row, rowIndex }) / string | — | — |
|
||||
| row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | function({ row, rowIndex }) / object | — | — |
|
||||
| cell-class-name | 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 | function({ row, column, rowIndex, columnIndex }) / string | — | — |
|
||||
| cell-style | 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | function({ row, column, rowIndex, columnIndex }) / object | — | — |
|
||||
| header-row-class-name | 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 | function({ row, rowIndex }) / string | — | — |
|
||||
| header-row-style | 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 | function({ row, rowIndex }) / object | — | — |
|
||||
| header-cell-class-name | 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 | function({ row, column, rowIndex, columnIndex }) / string | — | — |
|
||||
| header-cell-style | 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 | function({ row, column, rowIndex, columnIndex }) / object | — | — |
|
||||
| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：`user.info.id`，但不支持 `user.info[0].id`，此种情况请使用 `Function`。 | function(row) / string | — | — |
|
||||
| empty-text | 空数据时显示的文本内容，也可以通过 `#empty` 设置 | string | — | 暂无数据 |
|
||||
| default-expand-all | 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 | boolean | — | false |
|
||||
| expand-row-keys | 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。| array | — | — |
|
||||
| default-sort | 默认的排序列的 prop 和顺序。它的 `prop` 属性指定默认的排序的列，`order` 指定默认排序的顺序| object | `order`: ascending / descending | 如果只指定了 `prop`, 没有指定 `order`, 则默认顺序是 ascending |
|
||||
| tooltip-effect | tooltip `effect` 属性 | string | dark / light | dark |
|
||||
| show-summary | 是否在表尾显示合计行 | boolean | — | false |
|
||||
| sum-text | 合计行第一列的文本 | string | — | 合计 |
|
||||
| summary-method | 自定义的合计计算方法 | function({ columns, data }) | — | — |
|
||||
| span-method | 合并行或列的计算方法 | function({ row, column, rowIndex, columnIndex }) | — | — |
|
||||
| select-on-indeterminate | 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 | boolean | — | true |
|
||||
| indent | 展示树形数据时，树节点的缩进 | number | — | 16 |
|
||||
| lazy | 是否懒加载子节点数据 | boolean | — | — |
|
||||
| load | 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息 | function(row, treeNode, resolve) | — | — |
|
||||
| tree-props | 渲染嵌套数据的配置选项 | object | — | { hasChildren: 'hasChildren', children: 'children' } |
|
||||
|
||||
### Table Events
|
||||
| 事件名 | 说明 | 参数 |
|
||||
@@ -1915,13 +1915,13 @@
|
||||
| ---- | ---- | ---- |
|
||||
| clearSelection | 用于多选表格，清空用户的选择 | — |
|
||||
| toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected |
|
||||
| toggleAllSelection | 用于多选表格，切换全选和全不选 | - |
|
||||
| toggleAllSelection | 用于多选表格，切换全选和全不选 | — |
|
||||
| toggleRowExpansion | 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, expanded |
|
||||
| setCurrentRow | 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 | row |
|
||||
| clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | — |
|
||||
| clearFilter | 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件 | columnKey |
|
||||
| doLayout | 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 | — |
|
||||
| sort | 手动对 Table 进行排序。参数`prop`属性指定排序列，`order`指定排序顺序。 | prop: string, order: string |
|
||||
| sort | 手动对 Table 进行排序。参数 `prop` 属性指定排序列，`order` 指定排序顺序。 | prop: string, order: string |
|
||||
|
||||
### Table Slot
|
||||
| name | 说明 |
|
||||
@@ -1931,35 +1931,35 @@
|
||||
### Table-column Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| type | 对应列的类型。如果设置了 `selection` 则显示多选框；如果设置了 `index` 则显示该行的索引（从 1 开始计算）；如果设置了 `expand` 则显示为一个可展开的按钮 | string | selection/index/expand | — |
|
||||
| index | 如果设置了 `type=index`，可以通过传递 `index` 属性来自定义索引 | number, Function(index) | - | - |
|
||||
| type | 对应列的类型。如果设置了 `selection` 则显示多选框；如果设置了 `index` 则显示该行的索引（从 1 开始计算）；如果设置了 `expand` 则显示为一个可展开的按钮 | string | selection / index / expand | — |
|
||||
| index | 如果设置了 `type=index`，可以通过传递 `index` 属性来自定义索引 | number / function(index) | — | — |
|
||||
| column-key | column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | string | — | — |
|
||||
| label | 显示的标题 | string | — | — |
|
||||
| prop | 对应列内容的字段名，也可以使用 property 属性 | string | — | — |
|
||||
| width | 对应列的宽度 | string | — | — |
|
||||
| min-width | 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | string | — | — |
|
||||
| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true, left, right | — |
|
||||
| render-header | 列标题 Label 区域渲染使用的 Function | Function({ column, $index }) | — | — |
|
||||
| sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean, string | true, false, 'custom' | false |
|
||||
| sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致 | Function(a, b) | — | — |
|
||||
| sort-by | 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 | String/Array/Function(row, index) | — | — |
|
||||
| width | 对应列的宽度 | string / number | — | — |
|
||||
| min-width | 对应列的最小宽度，与 `width` 的区别是 `width` 是固定的，`min-width` 会把剩余宽度按比例分配给设置了 `min-width` 的列 | string / number | — | — |
|
||||
| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true / 'left' / 'right' | — |
|
||||
| render-header | 列标题 Label 区域渲染使用的 Function | function({ column, $index }) | — | — |
|
||||
| sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean / string | true / false / 'custom' | false |
|
||||
| sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致 | function(a, b) | — | — |
|
||||
| sort-by | 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 | string / array / function(row, index) | — | — |
|
||||
| sort-orders | 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序 | array | 数组中的元素需为以下三者之一：`ascending` 表示升序，`descending` 表示降序，`null` 表示还原为原始顺序 | ['ascending', 'descending', null] |
|
||||
| resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | boolean | — | true |
|
||||
| formatter | 用来格式化内容 | Function(row, column, cellValue, index) | — | — |
|
||||
| show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false |
|
||||
| align | 对齐方式 | String | left/center/right | left |
|
||||
| header-align | 表头对齐方式，若不设置该项，则使用表格的对齐方式 | String | left/center/right | — |
|
||||
| formatter | 用来格式化内容 | function(row, column, cellValue, index) | — | — |
|
||||
| show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | boolean | — | false |
|
||||
| align | 对齐方式 | string | left / center / right | left |
|
||||
| header-align | 表头对齐方式，若不设置该项，则使用表格的对齐方式 | string | left / center / right | — |
|
||||
| class-name | 列的 className | string | — | — |
|
||||
| label-class-name | 当前列标题的自定义类名 | string | — | — |
|
||||
| selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | — | — |
|
||||
| reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 `row-key`） | Boolean | — | false |
|
||||
| filters | 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。 | Array[{ text, value }] | — | — |
|
||||
| filter-placement | 过滤弹出框的定位 | String | 与 Tooltip 的 `placement` 属性相同 | — |
|
||||
| filter-multiple | 数据过滤的选项是否多选 | Boolean | — | true |
|
||||
| filter-method | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 | Function(value, row, column) | — | — |
|
||||
| filtered-value | 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 | Array | — | — |
|
||||
| selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | function(row, index) | — | — |
|
||||
| reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 `row-key`） | boolean | — | false |
|
||||
| filters | 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。 | array[{ text, value }] | — | — |
|
||||
| filter-placement | 过滤弹出框的定位 | string | 与 Tooltip 的 `placement` 属性相同 | — |
|
||||
| filter-multiple | 数据过滤的选项是否多选 | boolean | — | true |
|
||||
| filter-method | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 | function(value, row, column) | — | — |
|
||||
| filtered-value | 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 | array | — | — |
|
||||
|
||||
### Table-column Scoped Slot
|
||||
### Table-column Slot
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| — | 自定义列的内容，参数为 { row, column, $index } |
|
||||
|
||||
Reference in New Issue
Block a user