Tree-Table

Brief

This component only provides a solution for creating TreeTable. It is based on the element-ui table component. It uses the row-style method of el-table to determine whether the element needs to be hidden or displayed.

And this component makes full use of the features of the vue slot to make it user-friendly.

In evel.js, the addAttrs method adds several properties to the data, and treeTotable flattens the array. None of these operations will destroy the source data, just add properties.

Props

Attribute Description Type Default
data original display data Array []
columns column attribute Array []
defaultExpandAll whether to expand all nodes by default Boolean false
defaultChildren specify which node object is used as the node's subtree String children
indent horizontal indentation of nodes in adjacent levels in pixels Number 50

Any of the el-table properties are supported, such as border, fit, size or @select, @cell-click. See the ʻel-table` documentation for details.


Example

<tree-table :data="data" :columns="columns" border>

data(Required)

const data = [
  {
    name:'1'
    children: [
      {
        name: '1-1'
      },
      {
        name: '1-2'
      }
    ]
  },
  {
    name: `2`
  }
]

columns(Required)

  • label: text displayed in the header
  • key: data.key will show in column
  • expand: true or false
  • checkbox: true or false
  • width: column width 。such as 200
  • align: alignment left/center/right
  • header-align: alignment of the table header 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'
  }
]

The tree table component will generate a named slot based on the key property of columns. If you need to customize the column data, you can do it through the slot.

<template slot="your key" slot-scope="{scope}">
  <el-tag>level: {{ scope.row._level }}</el-tag>
  <el-tag>expand: {{ scope.row._expand }}</el-tag>
  <el-tag>select: {{ scope.row._select }}</el-tag>
</template>

Events

Several methods are currently available, but only the beta version, which is likely to be modified later.

this.$refs.TreeTable.addChild(row, data) //Add child elements
this.$refs.TreeTable.addBrother(row, data) //Add a sibling element
this.$refs.TreeTable.delete(row) //Delete the element

Other

If you have other requirements, please refer to the el-table api to modify the index.vue