# Tabla de Árbol
# Resumen
Este componente solo proporciona una solución para crear TreeTable
. Se basa en el componente de tabla element-ui
. Utiliza el método row-style
de el-table
para determinar si el elemento debe ocultarse o mostrarse.
Y este componente hace uso completo de las características (slot) de vue
para que sea fácil de usar.
En evel.js
, el método addAttrs
agrega varias propiedades a los datos, y treeTotable
aplana la matriz. Ninguna de estas operaciones destruirá los datos de origen, solo agregará propiedades.
# Propiedades
Atributo | Descripción | Tipo | Predeterminado |
---|---|---|---|
data | datos de visualización originales | Array | [] |
columns | atributo de columna | Array | [] |
defaultExpandAll | si expandir todos los nodos por defecto | Boolean | false |
defaultChildren | Especifique qué objeto de nodo se utiliza como subárbol del nodo | String | children |
indent | Indentación horizontal de nodos en niveles adyacentes en píxeles | Number | 50 |
Se admite cualquiera de las propiedades de
el-table
, comoborder
,fit
,size
o@select
,@cell-click
. Consulta la documentación de ʻel-table` para más detalles.
# Ejemplo
<tree-table :data="data" :columns="columns" border>
# data(Requerido)
const data = [
{
name:'1'
children: [
{
name: '1-1'
},
{
name: '1-2'
}
]
},
{
name: `2`
}
]
# columns(Requerido)
- label: texto que se muestra en el encabezado
- key: data.key se mostrará en la columna
- expand:
true
ofalse
- checkbox:
true
ofalse
- width: ancho de columna, por ejemplo
200
- align: alineación
left/center/right
- header-align: alineación del encabezado de la tabla
left/center/right
const columns = [
{
label: 'Checkbox',
checkbox: true
},
{
label: '',
key: 'id',
expand: true
},
{
label: 'Event',
key: 'event',
width: 200,
align: 'left'
},
{
label: 'Scope',
key: 'scope'
}
]
El componente de la tabla de árbol generará un slot con nombre basado en la propiedad key de las columnas. Si necesitas personalizar los datos de la columna, puedes hacerlo a través del slot.
<template slot="your key" slot-scope="{scope}">
<el-tag>nivel: {{ scope.row._level }}</el-tag>
<el-tag>expandir: {{ scope.row._expand }}</el-tag>
<el-tag>seleccionar: {{ scope.row._select }}</el-tag>
</template>
# Eventos
Actualmente hay varios métodos disponibles, pero solo la versión beta
, que probablemente se modifique más adelante.
this.$refs.TreeTable.addChild(row, data) //Agregar elementos secundarios
this.$refs.TreeTable.addBrother(row, data) //Agregar un elemento hermano
this.$refs.TreeTable.delete(row) //Eliminar el elemento
# Otro
Si tienes otros requisitos, consulta la api el-table para modificar el index.vue