Skip to content

Table: support tree structure data #14632

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

Merged
merged 10 commits into from
Mar 27, 2019
Merged

Table: support tree structure data #14632

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d5bdb5f
Table: support TreeTable
ziyoung Mar 7, 2019
094ebc8
support table sort
ziyoung Mar 8, 2019
9918984
load async data
ziyoung Mar 13, 2019
c89ed3f
fix error
ziyoung Mar 13, 2019
d8b593f
update style
ziyoung Mar 14, 2019
41a047f
add test cases and docs
ziyoung Mar 14, 2019
28e3a99
fix test
ziyoung Mar 14, 2019
6e25310
fix error after loading data
ziyoung Mar 21, 2019
ca3b019
fix variable name
ziyoung Mar 27, 2019
c31fba6
fix test
ziyoung Mar 27, 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
122 changes: 121 additions & 1 deletion examples/docs/en-US/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
export default {
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.
Expand Down Expand Up @@ -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 | — | |
Expand All @@ -1717,6 +1834,9 @@ You can customize row index in `type=index` columns.
| 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 }) | — | — |

### Table Events
| Event Name | Description | Parameters |
Expand Down
124 changes: 122 additions & 2 deletions examples/docs/es/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
export default {
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.
Expand Down Expand Up @@ -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 | — | |
Expand All @@ -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 }) | — | — |
| 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 |
| 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 }) | — | — |

### Eventos de la tabla
| Nombre del evento | Descripción | Parámetros |
Expand Down
Loading