mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-10 12:01:57 +08:00
f45a57178a
* Add support to x vversion from npm * Add support to x vversion from npm * Add support to x vversion from npm * Add documentation for current repository
109 lines
3.3 KiB
Markdown
109 lines
3.3 KiB
Markdown
# 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`, como `border`, `fit`, `size` o `@select`, `@cell-click`. Consulta la documentación de ʻel-table` para más detalles.
|
||
|
||
---
|
||
|
||
### Ejemplo
|
||
|
||
```html
|
||
<tree-table :data="data" :columns="columns" border>
|
||
```
|
||
|
||
#### data(**Requerido**)
|
||
|
||
```js
|
||
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` o `false`
|
||
- checkbox: `true` o `false`
|
||
- 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`
|
||
|
||
```javascript
|
||
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.
|
||
|
||
```html
|
||
<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.
|
||
|
||
```js
|
||
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](http://element-cn.eleme.io/#/en-US/component/table) para modificar el index.vue
|