@@ -1330,6 +1330,123 @@ 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.
```html
<template>
<div>
<el-table
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
border
row-key="id">
<el-table-column
prop="date"
label="日期"
sortable
width="180">
</el-table-column>
<el-table-column
prop="name"
label="name"
sortable
width="180">
</el-table-column>
</el-table>
<el-table
:data="tableData1"
style="width: 100%"
row-key="id"
border
lazy
:load="load"
>
<el-table-column
prop="date"
label="date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="name"
width="180">
</el-table-column>
</el-table>
</div>
</template>
<script>
exportdefault{
data(){
return{
tableData:[{
id:1,
date:'2016-05-02',
name:'wangxiaohu'
},{
id:2,
date:'2016-05-04',
name:'wangxiaohu'
},{
id:3,
date:'2016-05-01',
name:'wangxiaohu',
children:[{
id:31,
date:'2016-05-01',
name:'wangxiaohu'
},{
id:32,
date:'2016-05-01',
name:'wangxiaohu'
}]
},{
id:4,
date:'2016-05-03',
name:'wangxiaohu'
}],
tableData1:[{
id:1,
date:'2016-05-02',
name:'wangxiaohu'
},{
id:2,
date:'2016-05-04',
name:'wangxiaohu'
},{
id:3,
date:'2016-05-01',
name:'wangxiaohu',
hasChildren:true
},{
id:4,
date:'2016-05-03',
name:'wangxiaohu'
}]
}
},
methods:{
load(tree,treeNode,resolve){
resolve([
{
id:31,
date:'2016-05-01',
name:'wangxiaohu'
},{
id:32,
date:'2016-05-01',
name:'wangxiaohu'
}
])
}
},
}
</script>
```
:::
### Summary row
For table of numbers, you can add an extra row at the table footer displaying each column's sum.
...
...
@@ -1706,7 +1823,7 @@ You can customize row index in `type=index` columns.
| 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. 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 | — | — |
| 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 |
| 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 | — | |
...
...
@@ -1717,6 +1834,9 @@ 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 }) | — | — |
@@ -1332,6 +1332,123 @@ Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de
```
:::
### 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.
```html
<template>
<div>
<el-table
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
border
row-key="id">
<el-table-column
prop="date"
label="日期"
sortable
width="180">
</el-table-column>
<el-table-column
prop="name"
label="name"
sortable
width="180">
</el-table-column>
</el-table>
<el-table
:data="tableData1"
style="width: 100%"
row-key="id"
border
lazy
:load="load"
>
<el-table-column
prop="date"
label="date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="name"
width="180">
</el-table-column>
</el-table>
</div>
</template>
<script>
exportdefault{
data(){
return{
tableData:[{
id:1,
date:'2016-05-02',
name:'wangxiaohu'
},{
id:2,
date:'2016-05-04',
name:'wangxiaohu'
},{
id:3,
date:'2016-05-01',
name:'wangxiaohu',
children:[{
id:31,
date:'2016-05-01',
name:'wangxiaohu'
},{
id:32,
date:'2016-05-01',
name:'wangxiaohu'
}]
},{
id:4,
date:'2016-05-03',
name:'wangxiaohu'
}],
tableData1:[{
id:1,
date:'2016-05-02',
name:'wangxiaohu'
},{
id:2,
date:'2016-05-04',
name:'wangxiaohu'
},{
id:3,
date:'2016-05-01',
name:'wangxiaohu',
hasChildren:true
},{
id:4,
date:'2016-05-03',
name:'wangxiaohu'
}]
}
},
methods:{
load(tree,treeNode,resolve){
resolve([
{
id:31,
date:'2016-05-01',
name:'wangxiaohu'
},{
id:32,
date:'2016-05-01',
name:'wangxiaohu'
}
])
}
},
}
</script>
```
:::
### Fila de resumen
Para una tabla de números, puede agregar una fila extra en el pie de página de la tabla que muestra la suma de cada columna.
...
...
@@ -1711,7 +1828,7 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
| 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 | clave de datos de la fila, utilizada para optimizar la representación de los datos. Es obligatorio `reserve-selection` esta habilitado. Cuando su tipo es string, se permite el acceso multinivel, por ejemplo, `user.info.id`, pero `user.info[0].id` no es permitido, en cuyo caso se debe usar una `function` | Function(row)/String | — | — |
| 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 | Texto mostrado cuando no existen datos. Puede personalizar esta área con `slot="empty"` | String | — | No Data |
| default-expand-all | especifica si todas las filas se expanden por defeto, 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 | — | |
...
...
@@ -1721,7 +1838,10 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
| 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 }) | — | — |
| 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 |
| 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 | 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 }) | — | — |
@@ -1333,6 +1333,123 @@ Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas affich
```
:::
### 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.
```html
<template>
<div>
<el-table
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
border
row-key="id">
<el-table-column
prop="date"
label="日期"
sortable
width="180">
</el-table-column>
<el-table-column
prop="name"
label="name"
sortable
width="180">
</el-table-column>
</el-table>
<el-table
:data="tableData1"
style="width: 100%"
row-key="id"
border
lazy
:load="load"
>
<el-table-column
prop="date"
label="date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="name"
width="180">
</el-table-column>
</el-table>
</div>
</template>
<script>
exportdefault{
data(){
return{
tableData:[{
id:1,
date:'2016-05-02',
name:'wangxiaohu'
},{
id:2,
date:'2016-05-04',
name:'wangxiaohu'
},{
id:3,
date:'2016-05-01',
name:'wangxiaohu',
children:[{
id:31,
date:'2016-05-01',
name:'wangxiaohu'
},{
id:32,
date:'2016-05-01',
name:'wangxiaohu'
}]
},{
id:4,
date:'2016-05-03',
name:'wangxiaohu'
}],
tableData1:[{
id:1,
date:'2016-05-02',
name:'wangxiaohu'
},{
id:2,
date:'2016-05-04',
name:'wangxiaohu'
},{
id:3,
date:'2016-05-01',
name:'wangxiaohu',
hasChildren:true
},{
id:4,
date:'2016-05-03',
name:'wangxiaohu'
}]
}
},
methods:{
load(tree,treeNode,resolve){
resolve([
{
id:31,
date:'2016-05-01',
name:'wangxiaohu'
},{
id:32,
date:'2016-05-01',
name:'wangxiaohu'
}
])
}
},
}
</script>
```
:::
### Ligne de somme
Pour les tableaux de nombres, vous pouvez ajouter une ligne en plus pour afficher la somme de chaque colonne.
...
...
@@ -1713,7 +1830,7 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
| 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 | — | — |
| 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 | 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 |
| 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 | — | |
...
...
@@ -1724,6 +1841,9 @@ 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 | 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 }) | — | — |
