Displays information in a clear hierarchical structure that can be expanded or collapsed.

Attributes

Parameter	Description	Type	Optional Values	Default
data	Display data	array	-	-
empty-text	Text displayed when content is empty	String	-	-
node-key	Property used as the unique identifier for each tree node; it should be unique across the entire tree	String	-	-
props	Configuration options. See the table below	object	-	-
render-after-expand	Whether to render child nodes only after a tree node is expanded for the first time	boolean	-	true
load	Method for loading subtree data; only takes effect when the lazy property is true	function(node, resolve)	-	-
render-content	Render function for tree node content	Function(h,	-	-
highlight-current	Whether to highlight the currently selected node. Default is false.	boolean	-	false
default-expand-all	Whether to expand all nodes by default	boolean	-	false
expand-on-click-node	Whether to expand or collapse a node when it is clicked. Default is true. If false, the node expands or collapses only when the arrow icon is clicked.	boolean	-	true
check-on-click-node	Whether to check a node when it is clicked. Default is false, meaning the node is checked only when its checkbox is clicked.	boolean	-	false
auto-expand-parent	Whether to automatically expand parent nodes when expanding child nodes	boolean	-	true
default-expanded-keys	Array of keys of nodes expanded by default	array	-	-
show-checkbox	Whether nodes can be selected	boolean	-	false
check-strictly	When checkboxes are displayed, whether to strictly keep parent and child nodes unassociated. Default is false	boolean	-	false
default-checked-keys	Array of keys of nodes checked by default	array	-	-
current-node-key	Currently selected node; must strictly equal the value corresponding to node-key	string, number	-	-
filter-node-method	Method executed when filtering tree nodes. Return true to show the node, or false to hide it	Function(value, data, node)	-	-
accordion	Whether only one sibling tree node can be expanded at a time	boolean	-	false
indent	Horizontal indent between adjacent levels, in pixels	number	-	16
icon-class	Custom icon for tree nodes	string	-	-
lazy	Whether to lazy-load child nodes; use with the load method	boolean	-	false
draggable	Whether to enable node dragging	boolean	-	false
allow-drag	Determines whether a node can be dragged	Function(node)	-	-
allow-drop	Determines whether the target node can be dropped onto during dragging. The type parameter has three values: 'prev', 'inner', and 'next', which mean before the target node, inside the target node, and after the target node respectively	Function(draggingNode, dropNode, type)	-	-

props

Parameter	Description	Type	Optional Values	Default
label	Specifies which property value of the node object is used as the node label	string, function(data, node)	-	-
children	Specifies which property value of the node object is used as the subtree	string	-	-
disabled	Specifies which property value of the node object controls whether the node checkbox is disabled	boolean, function(data, node)	-	-
isLeaf	Specifies whether the node is a leaf node; only takes effect when the lazy property is specified	boolean, function(data, node)	-	-

Methods

Internally, Tree wraps user-provided data with Node objects to store the current node state. Tree provides the following methods:

Method	Description	Parameter
filter	Filters tree nodes	Receives a parameter of any type, which is used as the first parameter in filter-node-method
updateKeyChildren	Sets child elements of a node by keys. node-key must be set to use this method	(key, data) receives two parameters: 1. node key 2. array of node data
getCheckedNodes	If nodes are selectable (show-checkbox is true), returns an array of currently checked nodes	(leafOnly, includeHalfChecked) receives two boolean parameters: 1. whether to include only leaf nodes, default false; 2. whether to include half-checked nodes, default false
setCheckedNodes	Sets the currently checked nodes. node-key must be set to use this method	(nodes) receives an array of checked node data
getCheckedKeys	If nodes are selectable (show-checkbox is true), returns an array of keys of currently checked nodes	(leafOnly) receives a boolean parameter. If true, only keys of checked leaf nodes are returned. Default is false
setCheckedKeys	Sets currently checked nodes by keys. node-key must be set to use this method	(keys, leafOnly) receives two parameters: 1. array of checked node keys; 2. boolean parameter. If true, only the checked state of leaf nodes is set. Default is false
setChecked	Sets the checked state of a node by key/data. node-key must be set to use this method	(key/data, checked, deep) receives three parameters: 1. key or data of the checked node; 2. boolean indicating whether the node is checked; 3. boolean indicating whether to set child nodes, default false
getHalfCheckedNodes	If nodes are selectable (show-checkbox is true), returns an array of currently half-checked nodes	-
getHalfCheckedKeys	If nodes are selectable (show-checkbox is true), returns an array of keys of currently half-checked nodes	-
getCurrentKey	Gets the key of the currently selected node. node-key must be set to use this method. Returns null if no node is selected	-
getCurrentNode	Gets the data of the currently selected node. Returns null if no node is selected	-
setCurrentKey	Sets the current selected state of a node by key. node-key must be set to use this method	(key) key of the node to select. If null, cancels the currently highlighted node
setCurrentNode	Sets the current selected state of a node by node. node-key must be set to use this method	(node) node to select
getNode	Gets the node in the Tree component by data or key	(data) key or data of the node to get
remove	Deletes a node in Tree. node-key must be set to use this method	(data) data or node of the node to delete
append	Appends a child node to a node in Tree	(data, parentNode) receives two parameters: 1. data of the child node to append; 2. data, key, or node of the child node parent
insertBefore	Adds a node before a Tree node	(data, refNode) receives two parameters: 1. data of the node to add; 2. data, key, or node of the node after the added node
insertAfter	Adds a node after a Tree node	(data, refNode) receives two parameters: 1. data of the node to add; 2. data, key, or node of the node before the added node

Events

Event Name	Description	Callback Parameters
node-click	Callback when a node is clicked	Three parameters in order: the object corresponding to the node in the array passed to the data property, the Node corresponding to the node, and the node component itself.
node-contextmenu	Triggered when a node is right-clicked	Four parameters in order: event, the object corresponding to the node in the array passed to the data property, the Node corresponding to the node, and the node component itself.
check-change	Callback when the checked state of a node changes	Three parameters in order: the object corresponding to the node in the array passed to the data property, whether the node itself is checked, and whether any node in its subtree is checked
check	Triggered when a checkbox is clicked	Two parameters in order: the object corresponding to the node in the array passed to the data property, and the current checked-state object of the tree, containing checkedNodes, checkedKeys, halfCheckedNodes, and halfCheckedKeys
current-change	Triggered when the currently selected node changes	Two parameters in order: current node data and the current Node object
node-expand	Triggered when a node is expanded	Three parameters in order: the object corresponding to the node in the array passed to the data property, the Node corresponding to the node, and the node component itself
node-collapse	Triggered when a node is collapsed	Three parameters in order: the object corresponding to the node in the array passed to the data property, the Node corresponding to the node, and the node component itself
node-drag-start	Triggered when node dragging starts	Two parameters in order: the Node corresponding to the dragged node and event
node-drag-enter	Triggered when dragging enters another node	Three parameters in order: the Node corresponding to the dragged node, the Node corresponding to the entered node, and event
node-drag-leave	Triggered when dragging leaves a node	Three parameters in order: the Node corresponding to the dragged node, the Node corresponding to the left node, and event
node-drag-over	Triggered while dragging over a node (similar to the browser mouseover event)	Three parameters in order: the Node corresponding to the dragged node, the Node corresponding to the current entered node, and event
node-drag-end	Triggered when dragging ends (may not succeed)	Four parameters in order: the Node corresponding to the dragged node, the last entered node when dragging ended (may be empty), the drop position of the dragged node (before, after, inner), and event
node-drop	Triggered when dragging completes successfully	Four parameters in order: the Node corresponding to the dragged node, the last entered node when dragging ended, the drop position of the dragged node (before, after, inner), and event

Scoped Slot

name	Description
-	Custom tree node content. Parameter is

Basic Usage

Displays a basic tree structure.

<fx-tree style="width:80px;" :data="data" :props="defaultProps" @node-click="handleNodeClick"></fx-tree>

<script>
  export default {
    data() {
      return {
        data: [{
          label: 'Level 1 1',
          children: [{
            label: 'Level 2 1-1',
            children: [{
              label: 'Level 3 1-1-1'
            }]
          }]
        }, {
          label: 'Level 1 2',
          children: [{
            label: 'Level 2 2-1',
            children: [{
              label: 'Level 3 2-1-1'
            }]
          }, {
            label: 'Level 2 2-2',
            children: [{
              label: 'Level 3 2-2-1'
            }]
          }]
        }, {
          label: 'Level 1 3',
          children: [{
            label: 'Level 2 3-1',
            children: [{
              label: 'Level 3 3-1-1'
            }]
          }, {
            label: 'Level 2 3-2',
            children: [{
              label: 'Level 3 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>

Selectable

Use this when hierarchical selection is required.

<fx-tree
  :props="props"
  :load="loadNode"
  lazy
  show-checkbox
  @check-change="handleCheckChange">
</fx-tree>

<script>
  export default {
    data() {
      return {
        props: {
          label: 'name',
          children: 'zones'
        },
        count: 1
      };
    },
    methods: {
      handleCheckChange(data, checked, indeterminate) {
        console.log(data, checked, indeterminate);
      },
      handleNodeClick(data) {
        console.log(data);
      },
      loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: 'region1' }, { name: 'region2' }]);
        }
        if (node.level > 3) return resolve([]);

        var hasChild;
        if (node.data.name === 'region1') {
          hasChild = true;
        } else if (node.data.name === 'region2') {
          hasChild = false;
        } else {
          hasChild = Math.random() > 0.5;
        }

        setTimeout(() => {
          var data;
          if (hasChild) {
            data = [{
              name: 'zone' + this.count++
            }, {
              name: 'zone' + this.count++
            }];
          } else {
            data = [];
          }

          resolve(data);
        }, 500);
      }
    }
  };
</script>

Lazy Load Custom Leaf Nodes

<fx-tree
  :props="props"
  :load="loadNode"
  lazy
  show-checkbox>
</fx-tree>

<script>
  export default {
    data() {
      return {
        props: {
          label: 'name',
          children: 'zones',
          isLeaf: 'leaf'
        },
      };
    },
    methods: {
      loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: 'region' }]);
        }
        if (node.level > 1) return resolve([]);

        setTimeout(() => {
          const data = [{
            name: 'leaf',
            leaf: true
          }, {
            name: 'zone'
          }];

          resolve(data);
        }, 500);
      }
    }
  };
</script>

Default Expanded and Default Checked

Set some Tree nodes to be expanded or checked by default.

<fx-tree
  :data="data"
  show-checkbox
  node-key="id"
  :default-expanded-keys="[2, 3]"
  :default-checked-keys="[5]"
  :current-node-key="1"
  :props="defaultProps">
</fx-tree>

<script>
  export default {
    data() {
      return {
        data: [{
          id: 1,
          label: 'Level 1 1',
          children: [{
            id: 4,
            label: 'Level 2 1-1',
            children: [{
              id: 9,
              label: 'Level 3 1-1-1'
            }, {
              id: 10,
              label: 'Level 3 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: 'Level 1 2',
          children: [{
            id: 5,
            label: 'Level 2 2-1'
          }, {
            id: 6,
            label: 'Level 2 2-2'
          }]
        }, {
          id: 3,
          label: 'Level 1 3',
          children: [{
            id: 7,
            label: 'Level 2 3-1'
          }, {
            id: 8,
            label: 'Level 2 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

Disabled State

Set some Tree nodes to disabled.

<fx-tree
  :data="data"
  show-checkbox
  node-key="id"
  :default-expanded-keys="[2, 3]"
  :default-checked-keys="[5]">
</fx-tree>

<script>
  export default {
    data() {
      return {
        data: [{
          id: 1,
          label: 'Level 1 2',
          children: [{
            id: 3,
            label: 'Level 2 2-1',
            children: [{
              id: 4,
              label: 'Level 3 3-1-1'
            }, {
              id: 5,
              label: 'Level 3 3-1-2',
              disabled: true
            }]
          }, {
            id: 2,
            label: 'Level 2 2-2',
            disabled: true,
            children: [{
              id: 6,
              label: 'Level 3 3-2-1'
            }, {
              id: 7,
              label: 'Level 3 3-2-2',
              disabled: true
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

Tree Node Selection

<fx-tree
  :data="data"
  show-checkbox
  default-expand-all
  node-key="id"
  ref="tree"
  highlight-current
  :props="defaultProps">
</fx-tree>

<div class="buttons">
  <fx-button @click="getCheckedNodes">Get by node</fx-button>
  <fx-button @click="getCheckedKeys">Get by key</fx-button>
  <fx-button @click="setCheckedNodes">Set by node</fx-button>
  <fx-button @click="setCheckedKeys">Set by key</fx-button>
  <fx-button @click="resetChecked">Clear</fx-button>
</div>

<script>
  export default {
    methods: {
      getCheckedNodes() {
        console.log(this.$refs.tree.getCheckedNodes());
      },
      getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys());
      },
      setCheckedNodes() {
        this.$refs.tree.setCheckedNodes([{
          id: 5,
          label: 'Level 2 2-1'
        }, {
          id: 9,
          label: 'Level 3 1-1-1'
        }]);
      },
      setCheckedKeys() {
        this.$refs.tree.setCheckedKeys([3]);
      },
      resetChecked() {
        this.$refs.tree.setCheckedKeys([]);
      }
    },

    data() {
      return {
        data: [{
          id: 1,
          label: 'Level 1 1',
          children: [{
            id: 4,
            label: 'Level 2 1-1',
            children: [{
              id: 9,
              label: 'Level 3 1-1-1'
            }, {
              id: 10,
              label: 'Level 3 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: 'Level 1 2',
          children: [{
            id: 5,
            label: 'Level 2 2-1'
          }, {
            id: 6,
            label: 'Level 2 2-2'
          }]
        }, {
          id: 3,
          label: 'Level 1 3',
          children: [{
            id: 7,
            label: 'Level 2 3-1'
          }, {
            id: 8,
            label: 'Level 2 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

Custom Node Content

Node content can be customized. You can add buttons, icons, and other content in the node area.

<div class="custom-tree-container">
  <div class="block">
    <p>Use render-content</p>
    <fx-tree
      :data="data"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :render-content="renderContent">
    </fx-tree>
  </div>
  <div class="block">
    <p>Use scoped slot</p>
    <fx-tree
      :data="data"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <fx-button
            type="text"
            size="mini"
            @click="() => append(data)">
            Append
          </fx-button>
          <fx-button
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            Delete
          </fx-button>
        </span>
      </span>
    </fx-tree>
  </div>
</div>

<script>
  let id = 1000;

  export default {
    data() {
      const data = [{
        id: 1,
        label: 'Level 1 1',
        children: [{
          id: 4,
          label: 'Level 2 1-1',
          children: [{
            id: 9,
            label: 'Level 3 1-1-1'
          }, {
            id: 10,
            label: 'Level 3 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: 'Level 1 2',
        children: [{
          id: 5,
          label: 'Level 2 2-1'
        }, {
          id: 6,
          label: 'Level 2 2-2'
        }]
      }, {
        id: 3,
        label: 'Level 1 3',
        children: [{
          id: 7,
          label: 'Level 2 3-1'
        }, {
          id: 8,
          label: 'Level 2 3-2'
        }]
      }];
      return {
        data: JSON.parse(JSON.stringify(data)),
        data: JSON.parse(JSON.stringify(data))
      }
    },

    methods: {
      append(data) {
        const newChild = { id: id++, label: 'testtest', children: [] };
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },

      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },

      renderContent(h, { node, data, store }) {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <fx-button size="mini" type="text" on-click={ () => this.append(data) }>Append</fx-button>
              <fx-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</fx-button>
            </span>
          </span>);
      }
    }
  };
</script>

<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>

Node Filtering

Filter tree nodes by keyword.

<fx-input
  placeholder="Enter keyword to filter"
  v-model="filterText">
</fx-input>

<fx-tree
  class="filter-tree"
  :data="data"
  :props="defaultProps"
  default-expand-all
  :filter-node-method="filterNode"
  ref="tree">
</fx-tree>

<script>
  export default {
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },

    methods: {
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      }
    },

    data() {
      return {
        filterText: '',
        data: [{
          id: 1,
          label: 'Level 1 1',
          children: [{
            id: 4,
            label: 'Level 2 1-1',
            children: [{
              id: 9,
              label: 'Level 3 1-1-1'
            }, {
              id: 10,
              label: 'Level 3 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: 'Level 1 2',
          children: [{
            id: 5,
            label: 'Level 2 2-1'
          }, {
            id: 6,
            label: 'Level 2 2-2'
          }]
        }, {
          id: 3,
          label: 'Level 1 3',
          children: [{
            id: 7,
            label: 'Level 2 3-1'
          }, {
            id: 8,
            label: 'Level 2 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

Accordion Mode

For nodes at the same level, only one can be expanded at a time.

<fx-tree
  :data="data"
  :props="defaultProps"
  accordion
  @node-click="handleNodeClick">
</fx-tree>

<script>
  export default {
    data() {
      return {
        data: [{
          label: 'Level 1 1',
          children: [{
            label: 'Level 2 1-1',
            children: [{
              label: 'Level 3 1-1-1'
            }]
          }]
        }, {
          label: 'Level 1 2',
          children: [{
            label: 'Level 2 2-1',
            children: [{
              label: 'Level 3 2-1-1'
            }]
          }, {
            label: 'Level 2 2-2',
            children: [{
              label: 'Level 3 2-2-1'
            }]
          }]
        }, {
          label: 'Level 1 3',
          children: [{
            label: 'Level 2 3-1',
            children: [{
              label: 'Level 3 3-1-1'
            }]
          }, {
            label: 'Level 2 3-2',
            children: [{
              label: 'Level 3 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>

Draggable Nodes

Use the draggable attribute to make nodes draggable.

<fx-tree
  :data="data"
  node-key="id"
  default-expand-all
  @node-drag-start="handleDragStart"
  @node-drag-enter="handleDragEnter"
  @node-drag-leave="handleDragLeave"
  @node-drag-over="handleDragOver"
  @node-drag-end="handleDragEnd"
  @node-drop="handleDrop"
  draggable
  :allow-drop="allowDrop"
  :allow-drag="allowDrag">
</fx-tree>

<script>
  export default {
    data() {
      return {
        data: [{
          id: 1,
          label: 'Level 1 1',
          children: [{
            id: 4,
            label: 'Level 2 1-1',
            children: [{
              id: 9,
              label: 'Level 3 1-1-1'
            }, {
              id: 10,
              label: 'Level 3 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: 'Level 1 2',
          children: [{
            id: 5,
            label: 'Level 2 2-1'
          }, {
            id: 6,
            label: 'Level 2 2-2'
          }]
        }, {
          id: 3,
          label: 'Level 1 3',
          children: [{
            id: 7,
            label: 'Level 2 3-1'
          }, {
            id: 8,
            label: 'Level 2 3-2',
            children: [{
             id: 11,
              label: 'Level 3 3-2-1'
            }, {
              id: 12,
              label: 'Level 3 3-2-2'
            }, {
              id: 13,
              label: 'Level 3 3-2-3'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleDragStart(node, ev) {
        console.log('drag start', node);
      },
      handleDragEnter(draggingNode, dropNode, ev) {
        console.log('tree drag enter: ', dropNode.label);
      },
      handleDragLeave(draggingNode, dropNode, ev) {
        console.log('tree drag leave: ', dropNode.label);
      },
      handleDragOver(draggingNode, dropNode, ev) {
        console.log('tree drag over: ', dropNode.label);
      },
      handleDragEnd(draggingNode, dropNode, dropType, ev) {
        console.log('tree drag end: ', dropNode && dropNode.label, dropType);
      },
      handleDrop(draggingNode, dropNode, dropType, ev) {
        console.log('tree drop: ', dropNode.label, dropType);
      },
      allowDrop(draggingNode, dropNode, type) {
        if (dropNode.data.label === 'Level 2 3-1') {
          return type !== 'inner';
        } else {
          return true;
        }
      },
      allowDrag(draggingNode) {
        return draggingNode.data.label.indexOf('Level 3 3-2-2') === -1;
      }
    }
  };
</script>