Fxiaoke Developer Manual
Table of Contents

Tree

# FxTree Tree

Display hierarchical data in a clear structure that can be expanded or collapsed.

# Attributes

Attribute Description Type Optional Default
data Tree data array — —
empty-text Text displayed when there is no data String — —
node-key Unique identity key name for nodes, its value should be unique across the whole tree String — —
props Configuration options, see table below object — —
render-after-expand Whether to render child nodes only after a parent node is expanded for the first time boolean — true
load Method for loading subtree data, only works when lazy is true function(node, resolve) — —
render-content Render function for tree node content Function(h, { node, data, store }) — —
highlight-current Whether current node is highlighted boolean — false
default-expand-all Whether to expand all nodes by default boolean — false
expand-on-click-node Whether expanding and collapsing node is triggered by clicking node, the default value is true. If it's false, only clicking the arrow icon triggers expanding and collapsing boolean — true
check-on-click-node Whether checking node is triggered by clicking node, the default value is false, that is, only clicking the checkbox triggers checking node boolean — false
auto-expand-parent Whether to expand parent node when expanding a child node boolean — true
default-expanded-keys Array of keys of initially expanded nodes array — —
show-checkbox Whether node is selectable boolean — false
check-strictly Whether checked state of a node not affects its parent and child nodes when show-checkbox is true boolean — false
default-checked-keys Array of keys of initially checked nodes array — —
current-node-key Key of currently selected node, must be set only if node-key is set string, number — —
filter-node-method Method that will be executed on each node when filtering. If false is returned, the node will be hidden Function(value, data, node) — —
accordion Whether only one node among the same level can be expanded at one time boolean — false
indent Horizontal indentation of nodes in adjacent levels in pixels number — 16
icon-class Custom tree node icon string — —
lazy Whether to lazy load leaf node, used with load attribute boolean — false
draggable Whether enable tree node drag and drop boolean — false
allow-drag Function that determines if a node can be dragged Function(node) — —
allow-drop Function that determines if a node can be dropped. The type parameter has three possible values: 'prev' (inserting before the target node), 'inner' (inserting at the bottom of the target node) and 'next' (inserting after the target node) Function(draggingNode, dropNode, type) — —

# props

Attribute Description Type Optional Default
label Specify which property of the node object is used as the node's label string, function(data, node) — —
children Specify which property of the node object is used as the node's subtree string — —
disabled Specify which property of the node object is used as the node's disabled boolean, function(data, node) — —
isLeaf Specify whether the node is a leaf node, works only when lazy is true boolean, function(data, node) — —

# Methods

Tree internally uses Node objects to wrap the data passed by users, which is used to save the current state of nodes. Tree has the following methods:

Method Description Parameters
filter Filter all tree nodes, filtered nodes will be hidden Accept one parameter of any type, which will be passed to filter-node-method as its first parameter
updateKeyChildren Set child nodes by keys, node-key is required (key, data) Accept two parameters: 1. key of the node 2. array of node data
getCheckedNodes If node is selectable (show-checkbox is true), it returns the currently checked array of nodes (leafOnly, includeHalfChecked) Accept two boolean type parameters: 1. whether to return only leaf nodes, default false 2. whether to include half-checked nodes, default false
setCheckedNodes Set checked nodes, node-key is required (nodes) Accept an array of checked node data
getCheckedKeys If node is selectable (show-checkbox is true), it returns the currently checked array of node keys (leafOnly) Accept a boolean type parameter. If true, it only returns the keys of checked leaf nodes, default false
setCheckedKeys Set checked nodes by keys, node-key is required (keys, leafOnly) Accept two parameters: 1. array of keys of checked nodes 2. boolean type, if true only set leaf nodes' checked state, default false
setChecked Set checked state of a node by key/data, node-key is required (key/data, checked, deep) Accept three parameters: 1. key or data of the node 2. boolean, whether the node is checked 3. boolean, whether to set child nodes, default false
getHalfCheckedNodes If node is selectable (show-checkbox is true), it returns the currently half-checked array of nodes —
getHalfCheckedKeys If node is selectable (show-checkbox is true), it returns the currently half-checked array of node keys —
getCurrentKey Get the key of currently selected node, return null if no node is selected, node-key is required —
getCurrentNode Get the data of currently selected node, return null if no node is selected —
setCurrentKey Set the currently selected node by key, node-key is required. If key is null, remove current highlight (key) Key of the node to be selected, if null then remove current highlighted node
setCurrentNode Set the currently selected node by node object, node-key is required (node) The node object to be selected
getNode Get the node in the tree component by data or key (data) The key or data of the node to get
remove Remove a node from the tree, node-key is required (data) The data or node object of the node to be removed
append Append a child node to a node in the tree (data, parentNode) Accept two parameters: 1. data of the child node to be appended 2. data, key or node of the parent node
insertBefore Insert a node before a node in the tree (data, refNode) Accept two parameters: 1. data of the node to be inserted 2. data, key or node of the reference node
insertAfter Insert a node after a node in the tree (data, refNode) Accept two parameters: 1. data of the node to be inserted 2. data, key or node of the reference node

# Events

Event Name Description Callback Parameters
node-click Callback when node is clicked Three parameters: the node object corresponding to the node in the array passed to the data attribute, node's Node object, node component itself
node-contextmenu Triggered when a node is right-clicked Four parameters: event, the node object corresponding to the node in the array passed to the data attribute, node's Node object, node component itself
check-change Callback when the checked state of the node changes Three parameters: the node object corresponding to the node in the array passed to the data attribute, whether the node itself is checked, whether the node's subtree has checked nodes
check Triggered when the checkbox is clicked Two parameters: the node object corresponding to the node in the array passed to the data attribute, the current checked state object of the tree, containing four properties: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys
current-change Callback when current node changes Two parameters: the current node's data, the current node's Node object
node-expand Triggered when node is expanded Three parameters: the node object corresponding to the node in the array passed to the data attribute, node's Node object, node component itself
node-collapse Triggered when node is collapsed Three parameters: the node object corresponding to the node in the array passed to the data attribute, node's Node object, node component itself
node-drag-start Triggered when drag starts Two parameters: the dragged node's Node object, event
node-drag-enter Triggered when dragging enters other nodes Three parameters: the dragged node's Node object, the entered node's Node object, event
node-drag-leave Triggered when dragging leaves a node Three parameters: the dragged node's Node object, the left node's Node object, event
node-drag-over Triggered when dragging over a node (like mouseover) Three parameters: the dragged node's Node object, the currently entered node's Node object, event
node-drag-end Triggered when drag ends (may or may not succeed) Four parameters: the dragged node's Node object, the last entered node when drag ends (may be null), the drop position of the dragged node (before, after, inner), event
node-drop Triggered when drag ends successfully Four parameters: the dragged node's Node object, the last entered node, the drop position of the dragged node (before, after, inner), event

# Scoped Slot

name Description
— Custom content for tree nodes, parameter is { node, data }

# Basic Usage

Basic tree structure display.

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

<script>
  export default {
    data() {
      return {
        data: [{
          label: 'Level 1',
          children: [{
            label: 'Level 2 1-1',
            children: [{
              label: 'Level 3 1-1-1'
            }]
          }]
        }, {
          label: 'Level 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 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>
Expand Copy

# Checkbox

For scenarios where you need to select tree nodes.

This example also demonstrates how to dynamically load node data.

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

# Custom Leaf Node in Lazy Mode

Since data is fetched only when a node is clicked, by default Tree cannot tell if a node is a leaf node. So a loading indicator is added to each node, and if the node has no child nodes, it will disappear when clicked. You can also tell Tree if a node is a leaf node by the isLeaf property to avoid rendering the expand icon.

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

# Default Expanded and Default Checked

Set certain tree nodes to be expanded or checked by default.

Use default-expanded-keys and default-checked-keys to set default expanded and default checked nodes respectively. Note that node-key is required, its value should be a field name in the node data and should be unique across the whole tree.

<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',
          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 2',
          children: [{
            id: 5,
            label: 'Level 2 2-1'
          }, {
            id: 6,
            label: 'Level 2 2-2'
          }]
        }, {
          id: 3,
          label: 'Level 3',
          children: [{
            id: 7,
            label: 'Level 2 3-1'
          }, {
            id: 8,
            label: 'Level 2 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>
Expand Copy

# Disabled

Set certain tree nodes to be disabled.

Set disabled state via disabled property.

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

# Tree Node Selection

Get by node Get by key Set by node Set by key Clear

This example shows how to get and set checked nodes. There are two ways: by node or by key. If you want to get or set by key, node-key is required.

<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',
          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 2',
          children: [{
            id: 5,
            label: 'Level 2 2-1'
          }, {
            id: 6,
            label: 'Level 2 2-2'
          }]
        }, {
          id: 3,
          label: 'Level 3',
          children: [{
            id: 7,
            label: 'Level 2 3-1'
          }, {
            id: 8,
            label: 'Level 2 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>
Expand Copy

# Custom Node Content

The content of tree nodes can be customized, you can add buttons or icons to nodes.

Using render-content

Using scoped slot

There are two ways to customize tree node content: render-content and scoped slot. Using render-content to assign a render function that returns the content area for nodes. Refer to Vue documentation for render function usage. Using scoped slot will pass in two parameters node and data, representing the current node's Node object and data respectively. Note: Since jsfiddle does not support JSX syntax, the render-content example cannot run in jsfiddle. But in actual projects, it will work correctly as long as the relevant dependencies are properly configured.

<div class="custom-tree-container">
  <div class="block">
    <p>Using 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>Using 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',
        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 2',
        children: [{
          id: 5,
          label: 'Level 2 2-1'
        }, {
          id: 6,
          label: 'Level 2 2-2'
        }]
      }, {
        id: 3,
        label: 'Level 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>
Expand Copy

# Filtering

Filter tree nodes through keywords.

When you need to filter tree nodes, call the filter method of Tree instance, the parameter is the keyword. Note that filter-node-method is required, and its value is the filter function.

<fx-input
  placeholder="Enter keyword for filtering"
  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',
          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 2',
          children: [{
            id: 5,
            label: 'Level 2 2-1'
          }, {
            id: 6,
            label: 'Level 2 2-2'
          }]
        }, {
          id: 3,
          label: 'Level 3',
          children: [{
            id: 7,
            label: 'Level 2 3-1'
          }, {
            id: 8,
            label: 'Level 2 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>
Expand Copy

# Accordion

Only one node among the same level can be expanded at one time.

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

<script>
  export default {
    data() {
      return {
        data: [{
          label: 'Level 1',
          children: [{
            label: 'Level 2 1-1',
            children: [{
              label: 'Level 3 1-1-1'
            }]
          }]
        }, {
          label: 'Level 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 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>
Expand Copy

# Draggable

Enable tree node drag and drop via draggable attribute.

<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',
          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 2',
          children: [{
            id: 5,
            label: 'Level 2 2-1'
          }, {
            id: 6,
            label: 'Level 2 2-2'
          }]
        }, {
          id: 3,
          label: 'Level 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>
Expand Copy
Progress
Pagination

← Pagination→