Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table: add new features for Table and optimize code #15709

Merged
merged 18 commits into from
May 30, 2019
Merged

Table: add new features for Table and optimize code #15709

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
8436753
Table: refactor code
ziyoung May 22, 2019
ed58d09
use helper function
ziyoung May 22, 2019
1462dee
update code style
ziyoung May 22, 2019
b57ce6e
add tree-props
ziyoung May 22, 2019
84c21bd
TreeTable render well
ziyoung May 23, 2019
0cb3b51
support lazy loading
ziyoung May 23, 2019
16f5dc2
lazy load
ziyoung May 24, 2019
a64af87
fix max-height
ziyoung May 28, 2019
210b224
add loading icon
ziyoung May 28, 2019
1ba36c5
update test case
ziyoung May 28, 2019
402afc6
update docs and add test cases
ziyoung May 29, 2019
0db1e42
fix expand row index
ziyoung May 29, 2019
7575b05
improve performance
ziyoung May 29, 2019
058ba36
fix test
ziyoung May 30, 2019
df50494
fix loading
ziyoung May 30, 2019
d775dbe
fix sort
ziyoung May 30, 2019
327c61e
fix index
ziyoung May 30, 2019
15ec0db
fix loading icon
ziyoung May 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 23 additions & 19 deletions examples/docs/en-US/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1332,19 +1332,20 @@ When the row content is too long and you do not want to display the horizontal s

### Tree data and lazy mode

:::demo You can display tree structure data. When using it, the prop `row-key` is required. Also, child row data can be loaded asynchronously. Set `lazy` property of Table to true and the function `load`. Specify `hasChildren` attribute in row to determine which row contains children.
:::demo You can display tree structure data. When row contains the `children` field, it is treated as nested data. For rendering nested data, the prop `row-key` is required。Also, child row data can be loaded asynchronously. Set `lazy` property of Table to true and the function `load`. Specify `hasChildren` attribute in row to determine which row contains children. Both `children` and `hasChildren` can be configured via `tree-props`.

```html
<template>
<div>
<el-table
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
row-key="id">
default-expand-all>
<el-table-column
prop="date"
label="Date"
label="date"
sortable
width="180">
</el-table-column>
Expand All @@ -1363,7 +1364,7 @@ When the row content is too long and you do not want to display the horizontal s
border
lazy
:load="load"
>
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
prop="date"
label="Date"
Expand Down Expand Up @@ -1429,17 +1430,19 @@ When the row content is too long and you do not want to display the horizontal s
},
methods: {
load(tree, treeNode, resolve) {
resolve([
{
id: 31,
date: '2016-05-01',
name: 'wangxiaohu'
}, {
id: 32,
date: '2016-05-01',
name: 'wangxiaohu'
}
])
setTimeout(() => {
resolve([
{
id: 31,
date: '2016-05-01',
name: 'wangxiaohu'
}, {
id: 32,
date: '2016-05-01',
name: 'wangxiaohu'
}
])
}, 1000)
}
},
}
Expand Down Expand Up @@ -1825,7 +1828,7 @@ You can customize row index in `type=index` columns.
| 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 `slot="empty"` | String | — | No Data |
| default-expand-all | whether expand all rows by default, only works when the table has a column type="expand" | Boolean | — | false |
| 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 |
Expand All @@ -1836,7 +1839,8 @@ You can customize row index in `type=index` columns.
| 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 }) | — | — |
| 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 |
Expand All @@ -1857,15 +1861,15 @@ You can customize row index in `type=index` columns.
| filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered | filters |
| current-change | triggers when current row changes | currentRow, oldCurrentRow |
| header-dragend | triggers after changing a column's width by dragging the column header's border | newWidth, oldWidth, column, event |
| expand-change | triggers when user expands or collapses a row | row, expandedRows |
| expand-change | triggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded) | row, (expandedRows \| expanded) |

### Table Methods
| Method | Description | Parameters |
|------|--------|-------|
| 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 the selected state of all rows | - |
| toggleRowExpansion | used in expandable 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 |
| 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 | — |
| clearFilter | clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters | columnKeys |
Expand Down
38 changes: 21 additions & 17 deletions examples/docs/es/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1334,16 +1334,17 @@ Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de

### Datos tree y modo lazy

:::demo Puede mostrar la estructura de datos tipo tree。Cuando se usa, la prop`row-key` es requerida。Entonces, los datos de las filas de los hijos pueden ser cargados asincrónicamente. Poner la propiedad `lazy` de Table a true y la función `load`. Especifique el atributo `hasChildren` en la fila para determinar qué fila contiene hijos.
:::demo You can display tree structure data. When row contains the `children` field, it is treated as nested data. For rendering nested data, the prop `row-key` is required。Also, child row data can be loaded asynchronously. Set `lazy` property of Table to true and the function `load`. Specify `hasChildren` attribute in row to determine which row contains children. Both `children` and `hasChildren` can be configured via `tree-props`.

```html
<template>
<div>
<el-table
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
row-key="id">
default-expand-all>
<el-table-column
prop="date"
label="日期"
Expand All @@ -1365,7 +1366,7 @@ Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de
border
lazy
:load="load"
>
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
prop="date"
label="date"
Expand Down Expand Up @@ -1431,17 +1432,19 @@ Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de
},
methods: {
load(tree, treeNode, resolve) {
resolve([
{
id: 31,
date: '2016-05-01',
name: 'wangxiaohu'
}, {
id: 32,
date: '2016-05-01',
name: 'wangxiaohu'
}
])
setTimeout(() => {
resolve([
{
id: 31,
date: '2016-05-01',
name: 'wangxiaohu'
}, {
id: 32,
date: '2016-05-01',
name: 'wangxiaohu'
}
])
}, 1000)
}
},
}
Expand Down Expand Up @@ -1841,7 +1844,8 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
| 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 | metodo para cargar las filas de los hijos, solamente funciona cuando `lazy`es true | Function({ row, treeNode, resolve }) | — | — |
| load | metodo para cargar las filas de los hijos, solamente funciona cuando `lazy`es true | Function(row, treeNode, resolve) | — | — |
| tree-props | configuration for rendering nested data | Object | — | { hasChildren: 'hasChildren', children: 'children' } |

### Eventos de la tabla
| Nombre del evento | Descripción | Parámetros |
Expand All @@ -1862,15 +1866,15 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
| filter-change | clave de la columna. Si necesitas utilizar el evento filter-change, este atributo es obligatorio para identificar cuál columna está siendo filtrada | filters |
| current-change | se dispara cuando la fila actual cambia | currentRow, oldCurrentRow |
| header-dragend | se dispara después de modificar el ancho de una columna arrastrando el borde de la cabecera. | newWidth, oldWidth, column, event |
| expand-change | se dispara cuando el usuario expande o colapsa una fila | row, expandedRows |
| expand-change | triggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded) | row, (expandedRows \| expanded) |

### Métodos de la tabla
| Metodo | Descripción | Parametros |
| ------------------ | ---------------------------------------- | ------------- |
| 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 seleccion multiple, cambia los estados de seleccion de todas las filas. | - |
| toggleRowExpansion | utilizado en tabla expandible, alterna si una cierta fila es expandida. Con el segundo parámetro, puede directamente establecer si esta fila es expandida o colapsada | row, expanded |
| 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 | 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 | — |
| clearFilter | Se utiliza para borrar todas las condiciones de filtro cuando no se pasan parámetros, los datos se restaurarán a un estado sin filtrar, o se puede pasar una matriz de columnas para borrar las condiciones de filtro de la columna especificada. | columnKey |
Expand Down
46 changes: 25 additions & 21 deletions examples/docs/fr-FR/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1335,19 +1335,20 @@ Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas affich

### Arborescence et lazy loading

:::demo Vous pouvez afficher les données en arborescence, la propriété `row-key` devenant dans ce cas obligatoire. Les données enfants peuvent aussi être chargées de manière asynchrone. Mettez la propriété `lazy` à `true` and utilisez la fonction `load`. Spécifiez l'attribut `hasChildren` pour déterminer quelle ligne contient les enfants.
:::demo You can display tree structure data. When row contains the `children` field, it is treated as nested data. For rendering nested data, the prop `row-key` is required。Also, child row data can be loaded asynchronously. Set `lazy` property of Table to true and the function `load`. Specify `hasChildren` attribute in row to determine which row contains children. Both `children` and `hasChildren` can be configured via `tree-props`.

```html
<template>
<div>
<el-table
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
row-key="id">
default-expand-all>
<el-table-column
prop="date"
label="Date"
label="date"
sortable
width="180">
</el-table-column>
Expand All @@ -1366,7 +1367,7 @@ Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas affich
border
lazy
:load="load"
>
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
prop="date"
label="Date"
Expand Down Expand Up @@ -1432,17 +1433,19 @@ Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas affich
},
methods: {
load(tree, treeNode, resolve) {
resolve([
{
id: 31,
date: '2016-05-01',
name: 'wangxiaohu'
}, {
id: 32,
date: '2016-05-01',
name: 'wangxiaohu'
}
])
setTimeout(() => {
resolve([
{
id: 31,
date: '2016-05-01',
name: 'wangxiaohu'
}, {
id: 32,
date: '2016-05-01',
name: 'wangxiaohu'
}
])
}, 1000)
}
},
}
Expand Down Expand Up @@ -1832,7 +1835,7 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
| 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 à `slot="empty"`. | String | — | No Data |
| default-expand-all | Si toutes les lignes sont étendues par défaut, ne marche que si des lignes ont type="expand". | Boolean | — | false |
| 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 |
Expand All @@ -1841,9 +1844,10 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
| 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 | Indentation horizontale de l'arborescence. | Number | — | 16 |
| lazy | Si le lazy loading doit être utilisé. | Boolean | — | — |
| load | Méthode a utiliser pour le lazy loading, ne fonctionne que lorsque `lazy` est `true`. | Function({ row, treeNode, resolve }) | — | — |
| 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

Expand All @@ -1865,7 +1869,7 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
| filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered. | filters |
| current-change | Se déclenche quand la ligne sélectionnée change. | currentRow, oldCurrentRow |
| header-dragend | Se déclenche après un changement de taille de colonne en déplaçant la ligne verticale du header. | newWidth, oldWidth, column, event |
| expand-change | Se déclenche quand l'utilisateur étend ou réduit une ligne. | row, expandedRows |
| expand-change | triggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded) | row, (expandedRows \| expanded) |

### Méthodes de Table

Expand All @@ -1874,7 +1878,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, sélectionne toutes les lignes. | - |
| toggleRowExpansion | Pour les lignes extensibles, change l'état de la ligne. Grâce au deuxième paramètre vous pouvez directement décider si cette ligne est étendue. | row, expanded |
| 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. | — |
| clearFilter | Efface les filtres des colonnes dont les `columnKey` sont passées. Si aucun paramètre, efface tout les filtres. | columnKeys |
Expand Down
Loading