Tree

Introduction to using the Tree hierarchical component

Tree introduction diagram

Tree is a hierarchical structure that displays a series of related and organized levels of data. You can select certain nodes, commonly used for filtering information.

Example

<bpa-tree
  :data="treeData"
/>

treeData: [
  {
    id: 1,
    label: "A",
    children: [
      {
        id: 4,
        label: "D"
      },
      {
        id: 5,
        label: "E"
      }
    ]
  },
  {
    id: 2,
    label: "B",
    children: [
      {
        id: 6,
        label: "F"
      },
      {
        id: 7,
        label: "G",
        children: [
          {
            id: 8,
            label: "H"
          },
          {
            id: 9,
            label: "I"
          }
        ]
      }
    ]
  },
  {
    id: 3,
    label: "C",
  }
]

Additional checkbox form

<bpa-tree
  :data="treeData"
  show-checkbox
/>

Expand all nodes

<bpa-tree
  :data="treeData"
  default-expand-all
/>

Tree properties

Name	Value	Type	Default	Required	Note
data		Array
label		String
show-checkbox		Boolean	false		Nodes can be checked
default-expand-all		Boolean	false		Default expand all nodes

Treenode properties

Name	Value	Type	Default	Required	Note
id		Number
label		String || Number
children		Array
disabled		Boolean	false

Tree methods

Name	Parameters	Description
getCheckedNodes	Array	Returns selected nodes
getCheckedKeys	Array	Returns selected node keys (id)
setCheckedNodes	Array	Set checked nodes using keys (id) (Object)
setCheckedKeys	Array	Set checked nodes using keys (id)
resetChecked		Clear all checked nodes

Tree events

Name	Parameters	Description
node-check	(data, component)	Check/uncheck node
node-click/node-expand	(data, component)	When a node is checked/expanded

Demo