Skip to content

Commit 61a1885

Browse files
ziyoungziyoung
committed
update docs and add test cases
1 parent f5d8f2b commit 61a1885

File tree

8 files changed

+280
-156
lines changed

8 files changed

+280
-156
lines changed

‎examples/docs/en-US/table.md

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1332,19 +1332,20 @@ When the row content is too long and you do not want to display the horizontal s
13321332

13331333
### Tree data and lazy mode
13341334

1335-
:::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.
1335+
:::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`.
13361336

13371337
```html
13381338
<template>
13391339
<div>
13401340
<el-table
13411341
:data="tableData"
13421342
style="width: 100%;margin-bottom: 20px;"
1343+
row-key="id"
13431344
border
1344-
row-key="id">
1345+
default-expand-all>
13451346
<el-table-column
13461347
prop="date"
1347-
label="日期"
1348+
label="date"
13481349
sortable
13491350
width="180">
13501351
</el-table-column>
@@ -1363,7 +1364,7 @@ When the row content is too long and you do not want to display the horizontal s
13631364
border
13641365
lazy
13651366
:load="load"
1366-
>
1367+
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
13671368
<el-table-column
13681369
prop="date"
13691370
label="date"
@@ -1429,17 +1430,19 @@ When the row content is too long and you do not want to display the horizontal s
14291430
},
14301431
methods: {
14311432
load(tree, treeNode, resolve) {
1432-
resolve([
1433-
{
1434-
id: 31,
1435-
date: '2016-05-01',
1436-
name: 'wangxiaohu'
1437-
}, {
1438-
id: 32,
1439-
date: '2016-05-01',
1440-
name: 'wangxiaohu'
1441-
}
1442-
])
1433+
setTimeout(() => {
1434+
resolve([
1435+
{
1436+
id: 31,
1437+
date: '2016-05-01',
1438+
name: 'wangxiaohu'
1439+
}, {
1440+
id: 32,
1441+
date: '2016-05-01',
1442+
name: 'wangxiaohu'
1443+
}
1444+
])
1445+
}, 1000)
14431446
}
14441447
},
14451448
}
@@ -1825,7 +1828,7 @@ You can customize row index in `type=index` columns.
18251828
| 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 | — | — |
18261829
| 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 | — | — |
18271830
| empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | — | No Data |
1828-
| default-expand-all | whether expand all rows by default, only works when the table has a column type="expand" | Boolean | — | false |
1831+
| 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 |
18291832
| 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 | — | |
18301833
| 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 |
18311834
| tooltip-effect | tooltip `effect` property | String | dark/light | | dark |
@@ -1836,7 +1839,8 @@ You can customize row index in `type=index` columns.
18361839
| 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 |
18371840
| indent | horizontal indentation of tree data | Number | — | 16 |
18381841
| lazy | whether to lazy loading data | Boolean| — | — |
1839-
| load | method for loading child row data, only works when `lazy` is true | Function({ row, treeNode, resolve }) | — | — |
1842+
| load | method for loading child row data, only works when `lazy` is true | Function(row, treeNode, resolve) | — | — |
1843+
| tree-props | configuration for rendering nested data| Object | — | { hasChildren: 'hasChildren', children: 'children' } |
18401844

18411845
### Table Events
18421846
| Event Name | Description | Parameters |
@@ -1857,15 +1861,15 @@ You can customize row index in `type=index` columns.
18571861
| 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 |
18581862
| current-change | triggers when current row changes | currentRow, oldCurrentRow |
18591863
| header-dragend | triggers after changing a column's width by dragging the column header's border | newWidth, oldWidth, column, event |
1860-
| expand-change | triggers when user expands or collapses a row | row, expandedRows |
1864+
| 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) |
18611865

18621866
### Table Methods
18631867
| Method | Description | Parameters |
18641868
|------|--------|-------|
18651869
| clearSelection | used in multiple selection Table, clear user selection | — |
18661870
| 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 |
18671871
| toggleAllSelection | used in multiple selection Table, toggle the selected state of all rows | - |
1868-
| 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 |
1872+
| 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 |
18691873
| setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row |
18701874
| clearSort | clear sorting, restore data to the original order | — |
18711875
| clearFilter | clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters | columnKeys |

‎examples/docs/es/table.md

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1334,16 +1334,17 @@ Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de
13341334

13351335
### Datos tree y modo lazy
13361336

1337-
:::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.
1337+
:::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`.
13381338

13391339
```html
13401340
<template>
13411341
<div>
13421342
<el-table
13431343
:data="tableData"
13441344
style="width: 100%;margin-bottom: 20px;"
1345+
row-key="id"
13451346
border
1346-
row-key="id">
1347+
default-expand-all>
13471348
<el-table-column
13481349
prop="date"
13491350
label="日期"
@@ -1365,7 +1366,7 @@ Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de
13651366
border
13661367
lazy
13671368
:load="load"
1368-
>
1369+
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
13691370
<el-table-column
13701371
prop="date"
13711372
label="date"
@@ -1431,17 +1432,19 @@ Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de
14311432
},
14321433
methods: {
14331434
load(tree, treeNode, resolve) {
1434-
resolve([
1435-
{
1436-
id: 31,
1437-
date: '2016-05-01',
1438-
name: 'wangxiaohu'
1439-
}, {
1440-
id: 32,
1441-
date: '2016-05-01',
1442-
name: 'wangxiaohu'
1443-
}
1444-
])
1435+
setTimeout(() => {
1436+
resolve([
1437+
{
1438+
id: 31,
1439+
date: '2016-05-01',
1440+
name: 'wangxiaohu'
1441+
}, {
1442+
id: 32,
1443+
date: '2016-05-01',
1444+
name: 'wangxiaohu'
1445+
}
1446+
])
1447+
}, 1000)
14451448
}
14461449
},
14471450
}
@@ -1841,7 +1844,8 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
18411844
| 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 |
18421845
| indent | indentación horizontal de los datos en formato tree | Number | — | 16 |
18431846
| lazy | si se realiza un lazy loading de los datos | Boolean | — | — |
1844-
| load | metodo para cargar las filas de los hijos, solamente funciona cuando `lazy`es true | Function({ row, treeNode, resolve }) | — | — |
1847+
| load | metodo para cargar las filas de los hijos, solamente funciona cuando `lazy`es true | Function(row, treeNode, resolve) | — | — |
1848+
| tree-props | configuration for rendering nested data | Object | — | { hasChildren: 'hasChildren', children: 'children' } |
18451849

18461850
### Eventos de la tabla
18471851
| Nombre del evento | Descripción | Parámetros |
@@ -1862,15 +1866,15 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
18621866
| 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 |
18631867
| current-change | se dispara cuando la fila actual cambia | currentRow, oldCurrentRow |
18641868
| header-dragend | se dispara después de modificar el ancho de una columna arrastrando el borde de la cabecera. | newWidth, oldWidth, column, event |
1865-
| expand-change | se dispara cuando el usuario expande o colapsa una fila | row, expandedRows |
1869+
| 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) |
18661870

18671871
### Métodos de la tabla
18681872
| Metodo | Descripción | Parametros |
18691873
| ------------------ | ---------------------------------------- | ------------- |
18701874
| clearSelection | utilizado en selección múltiple de la tabla, limpiar selección | — |
18711875
| 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 |
18721876
| toggleAllSelection | usado en Table de seleccion multiple, cambia los estados de seleccion de todas las filas. | - |
1873-
| 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 |
1877+
| 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 |
18741878
| 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 |
18751879
| clearSort | limpiar ordenamiento, restaurar datos a orden original | — |
18761880
| 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 |

‎examples/docs/fr-FR/table.md

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1335,19 +1335,20 @@ Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas affich
13351335

13361336
### Tree data and lazy mode
13371337

1338-
:::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.
1338+
:::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`.
13391339

13401340
```html
13411341
<template>
13421342
<div>
13431343
<el-table
13441344
:data="tableData"
13451345
style="width: 100%;margin-bottom: 20px;"
1346+
row-key="id"
13461347
border
1347-
row-key="id">
1348+
default-expand-all>
13481349
<el-table-column
13491350
prop="date"
1350-
label="日期"
1351+
label="date"
13511352
sortable
13521353
width="180">
13531354
</el-table-column>
@@ -1366,7 +1367,7 @@ Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas affich
13661367
border
13671368
lazy
13681369
:load="load"
1369-
>
1370+
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
13701371
<el-table-column
13711372
prop="date"
13721373
label="date"
@@ -1432,17 +1433,19 @@ Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas affich
14321433
},
14331434
methods: {
14341435
load(tree, treeNode, resolve) {
1435-
resolve([
1436-
{
1437-
id: 31,
1438-
date: '2016-05-01',
1439-
name: 'wangxiaohu'
1440-
}, {
1441-
id: 32,
1442-
date: '2016-05-01',
1443-
name: 'wangxiaohu'
1444-
}
1445-
])
1436+
setTimeout(() => {
1437+
resolve([
1438+
{
1439+
id: 31,
1440+
date: '2016-05-01',
1441+
name: 'wangxiaohu'
1442+
}, {
1443+
id: 32,
1444+
date: '2016-05-01',
1445+
name: 'wangxiaohu'
1446+
}
1447+
])
1448+
}, 1000)
14461449
}
14471450
},
14481451
}
@@ -1832,7 +1835,7 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
18321835
| 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 | — | — |
18331836
| 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 | — | — |
18341837
| 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 |
1835-
| default-expand-all | Si toutes les lignes sont étendues par défaut, ne marche que si des lignes ont type="expand". | Boolean | — | false |
1838+
| 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 |
18361839
| 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 | — | |
18371840
| 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`. |
18381841
| tooltip-effect | Propriété `effect` de Tooltip. | String | dark/light | | dark |
@@ -1844,6 +1847,7 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
18441847
| indent | horizontal indentation of tree data | Number | — | 16 |
18451848
| lazy | whether to lazy loading data | Boolean | — | — |
18461849
| load | method for loading child row data, only works when `lazy` is true | Function({ row, treeNode, resolve }) | — | — |
1850+
| tree-props | configuration for rendering nested data | Object | — | { hasChildren: 'hasChildren', children: 'children' } |
18471851

18481852
### Évènements de Table
18491853

@@ -1865,7 +1869,7 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
18651869
| 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 |
18661870
| current-change | Se déclenche quand la ligne sélectionnée change. | currentRow, oldCurrentRow |
18671871
| 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 |
1868-
| expand-change | Se déclenche quand l'utilisateur étend ou réduit une ligne. | row, expandedRows |
1872+
| 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) |
18691873

18701874
### Méthodes de Table
18711875

@@ -1874,7 +1878,7 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
18741878
| clearSelection | Dans les tables avec sélection multiple, efface la sélection. | — |
18751879
| 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 |
18761880
| toggleAllSelection | Utilisé dans les tables à sélection multiples, sélectionne toutes les lignes. | - |
1877-
| 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 |
1881+
| 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 |
18781882
| setCurrentRow | Dans les tables à sélection simple, sélectionne une ligne. Sans paramètre la sélection est effacé. | row |
18791883
| clearSort | Efface le tri. | — |
18801884
| clearFilter | Efface les filtres des colonnes dont les `columnKey` sont passées. Si aucun paramètre, efface tout les filtres. | columnKeys |

0 commit comments

Comments
 (0)