Skip to content

Commit cfa929b

Browse files
ziyounglzq4047
ziyoung
authored and
lzq4047
committed
Table: add support tree structure data (ElemeFE#14632)
1 parent 4399007 commit cfa929b

File tree

11 files changed

+937
-42
lines changed

11 files changed

+937
-42
lines changed

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

Lines changed: 121 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1330,6 +1330,123 @@ When the row content is too long and you do not want to display the horizontal s
13301330
```
13311331
:::
13321332

1333+
### Tree data and lazy mode
1334+
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.
1336+
1337+
```html
1338+
<template>
1339+
<div>
1340+
<el-table
1341+
:data="tableData"
1342+
style="width: 100%;margin-bottom: 20px;"
1343+
border
1344+
row-key="id">
1345+
<el-table-column
1346+
prop="date"
1347+
label="日期"
1348+
sortable
1349+
width="180">
1350+
</el-table-column>
1351+
<el-table-column
1352+
prop="name"
1353+
label="name"
1354+
sortable
1355+
width="180">
1356+
</el-table-column>
1357+
</el-table>
1358+
1359+
<el-table
1360+
:data="tableData1"
1361+
style="width: 100%"
1362+
row-key="id"
1363+
border
1364+
lazy
1365+
:load="load"
1366+
>
1367+
<el-table-column
1368+
prop="date"
1369+
label="date"
1370+
width="180">
1371+
</el-table-column>
1372+
<el-table-column
1373+
prop="name"
1374+
label="name"
1375+
width="180">
1376+
</el-table-column>
1377+
</el-table>
1378+
</div>
1379+
</template>
1380+
<script>
1381+
export default {
1382+
data() {
1383+
return {
1384+
tableData: [{
1385+
id: 1,
1386+
date: '2016-05-02',
1387+
name: 'wangxiaohu'
1388+
}, {
1389+
id: 2,
1390+
date: '2016-05-04',
1391+
name: 'wangxiaohu'
1392+
}, {
1393+
id: 3,
1394+
date: '2016-05-01',
1395+
name: 'wangxiaohu',
1396+
children: [{
1397+
id: 31,
1398+
date: '2016-05-01',
1399+
name: 'wangxiaohu'
1400+
}, {
1401+
id: 32,
1402+
date: '2016-05-01',
1403+
name: 'wangxiaohu'
1404+
}]
1405+
}, {
1406+
id: 4,
1407+
date: '2016-05-03',
1408+
name: 'wangxiaohu'
1409+
}],
1410+
tableData1: [{
1411+
id: 1,
1412+
date: '2016-05-02',
1413+
name: 'wangxiaohu'
1414+
}, {
1415+
id: 2,
1416+
date: '2016-05-04',
1417+
name: 'wangxiaohu'
1418+
}, {
1419+
id: 3,
1420+
date: '2016-05-01',
1421+
name: 'wangxiaohu',
1422+
hasChildren: true
1423+
}, {
1424+
id: 4,
1425+
date: '2016-05-03',
1426+
name: 'wangxiaohu'
1427+
}]
1428+
}
1429+
},
1430+
methods: {
1431+
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+
])
1443+
}
1444+
},
1445+
}
1446+
</script>
1447+
```
1448+
:::
1449+
13331450
### Summary row
13341451

13351452
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.
17061823
| 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 | — | — |
17071824
| 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 | — | — |
17081825
| 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 | — | — |
1709-
| 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 | — | — |
1826+
| 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 | — | — |
17101827
| empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | — | No Data |
17111828
| default-expand-all | whether expand all rows by default, only works when the table has a column type="expand" | Boolean | — | false |
17121829
| 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.
17171834
| summary-method | custom summary method | Function({ columns, data }) | — | — |
17181835
| span-method | method that returns rowspan and colspan | Function({ row, column, rowIndex, columnIndex }) | — | — |
17191836
| 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 |
1837+
| indent | horizontal indentation of tree data | Number | — | 16 |
1838+
| 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 }) | — | — |
17201840

17211841
### Table Events
17221842
| Event Name | Description | Parameters |

‎examples/docs/es/table.md

Lines changed: 122 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1332,6 +1332,123 @@ Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de
13321332
```
13331333
:::
13341334

1335+
### Tree data and lazy mode
1336+
1337+
:::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+
1339+
```html
1340+
<template>
1341+
<div>
1342+
<el-table
1343+
:data="tableData"
1344+
style="width: 100%;margin-bottom: 20px;"
1345+
border
1346+
row-key="id">
1347+
<el-table-column
1348+
prop="date"
1349+
label="日期"
1350+
sortable
1351+
width="180">
1352+
</el-table-column>
1353+
<el-table-column
1354+
prop="name"
1355+
label="name"
1356+
sortable
1357+
width="180">
1358+
</el-table-column>
1359+
</el-table>
1360+
1361+
<el-table
1362+
:data="tableData1"
1363+
style="width: 100%"
1364+
row-key="id"
1365+
border
1366+
lazy
1367+
:load="load"
1368+
>
1369+
<el-table-column
1370+
prop="date"
1371+
label="date"
1372+
width="180">
1373+
</el-table-column>
1374+
<el-table-column
1375+
prop="name"
1376+
label="name"
1377+
width="180">
1378+
</el-table-column>
1379+
</el-table>
1380+
</div>
1381+
</template>
1382+
<script>
1383+
export default {
1384+
data() {
1385+
return {
1386+
tableData: [{
1387+
id: 1,
1388+
date: '2016-05-02',
1389+
name: 'wangxiaohu'
1390+
}, {
1391+
id: 2,
1392+
date: '2016-05-04',
1393+
name: 'wangxiaohu'
1394+
}, {
1395+
id: 3,
1396+
date: '2016-05-01',
1397+
name: 'wangxiaohu',
1398+
children: [{
1399+
id: 31,
1400+
date: '2016-05-01',
1401+
name: 'wangxiaohu'
1402+
}, {
1403+
id: 32,
1404+
date: '2016-05-01',
1405+
name: 'wangxiaohu'
1406+
}]
1407+
}, {
1408+
id: 4,
1409+
date: '2016-05-03',
1410+
name: 'wangxiaohu'
1411+
}],
1412+
tableData1: [{
1413+
id: 1,
1414+
date: '2016-05-02',
1415+
name: 'wangxiaohu'
1416+
}, {
1417+
id: 2,
1418+
date: '2016-05-04',
1419+
name: 'wangxiaohu'
1420+
}, {
1421+
id: 3,
1422+
date: '2016-05-01',
1423+
name: 'wangxiaohu',
1424+
hasChildren: true
1425+
}, {
1426+
id: 4,
1427+
date: '2016-05-03',
1428+
name: 'wangxiaohu'
1429+
}]
1430+
}
1431+
},
1432+
methods: {
1433+
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+
])
1445+
}
1446+
},
1447+
}
1448+
</script>
1449+
```
1450+
:::
1451+
13351452
### Fila de resumen
13361453

13371454
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
17111828
| 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 | — | — |
17121829
| 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 | — | — |
17131830
| 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 | — | — |
1714-
| 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 | — | — |
1831+
| 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 | — | — |
17151832
| empty-text | Texto mostrado cuando no existen datos. Puede personalizar esta área con `slot="empty"` | String | — | No Data |
17161833
| default-expand-all | especifica si todas las filas se expanden por defeto, solo funciona cuando la tabla tiene una columna `type="expand"` | Boolean | — | false |
17171834
| 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
17211838
| sum-text | texto a mostrar para la primer columna de la fila de resumen | String | — | Sum |
17221839
| summary-method | método personalizado para resumen | Function({ columns, data }) | — | — |
17231840
| span-method | método que devuelve _rowspan_ y _colspan_ | Function({ row, column, rowIndex, columnIndex }) | — | — |
1724-
| 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 |
1841+
| 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 |
1842+
| indent | horizontal indentation of tree data | Number | — | 16 |
1843+
| lazy | whether to lazy loading data | Boolean | — | — |
1844+
| load | method for loading child row data, only works when `lazy` is true | Function({ row, treeNode, resolve }) | — | — |
17251845

17261846
### Eventos de la tabla
17271847
| Nombre del evento | Descripción | Parámetros |

0 commit comments

Comments
 (0)