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

  <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 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
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