Customizable Tree View Component Based On Composition API

A customizable and feature-rich tree view component based on Vue 3.x composition API.

How to use it:

1. Import and register the vue3-tree.

import { ref } from 'vue';
import Tree from 'vue3-tree';

export default {
  components: {
    Tree,
  },
};

2. Add the Tree component to the template and define your data as follows:

<template>
  <Tree v-model:nodes="data" />
</template>

export default {
  components: {
    Tree,
  },
  setup() {
    const data = ref([
      {
        id: 1,
        label: 'JavaScript',
        nodes: [
          {
            id: 2,
            label: 'Vue',
          },
          {
            id: 3,
            label: 'React',
            nodes: [
              {
                id: 4,
                label: 'React.js',
              },
              {
                id: 5,
                label: 'React Native',
              },
            ],
          },
        ],
      },
      {
        id: 6,
        label: 'HTML5',
      },
    ]);
    return {
      data,
    };
  },
};

3. Add checkboxes to the tree.

<template #checkbox="{ id, checked, node, indeterminate, toggleCheckbox }">
  <custom-checkbox
    :checked="checked"
    :indeterminate="indeterminate"
    @click="toggleCheckbox"
  />
</template>

4. Add expand icons to parent nodes.

<template #iconActive>
  <custom-active-icon />
</template>
<template #iconInactive>
  <custom-inactive-icon />
</template>

5. Display the close icon.

<template #deleteIcon>
  <custom-delete-icon />
</template>

6. Show a child count.

<template #childCount="{ count, checkedCount, childs }">
  <div class="custom-child-count">
    {{`${checkedCount}/${count}`}}
  </div>
</template>

7. Available Tree props.

nodes: {
  type: Array,
  required: true,
},
props: {
  type: Object,
  default() {
    return {
      nodes: 'nodes',
      label: 'label',
    };
  },
},
indentSize: {
  type: Number,
  default: 24,
},
gap: {
  type: Number,
  default: 10,
},
searchText: {
  type: String,
  default: '',
},
expandRowByDefault: {
  type: Boolean,
  default: false,
},
expandAllRowsOnSearch: {
  type: Boolean,
  default: true,
},
useCheckbox: {
  type: Boolean,
  default: false,
},
useIcon: {
  type: Boolean,
  default: true,
},
useRowDelete: {
  type: Boolean,
  default: false,
},
showChildCount: {
  type: Boolean,
  default: false,
},
rowHoverBackground: {
  type: String,
  default: '#e0e0e0',
},
expandable: {
  type: Boolean,
  default: true,
},

8. Available treeRow props.

node: {
  type: Object,
  required: true,
},
indentSize: {
  type: Number,
  required: true,
},
gap: {
  type: Number,
  required: true,
},
getNode: {
  type: Function,
  required: true,
},
setNode: {
  type: Function,
  required: true,
},
updateNode: {
  type: Function,
  required: true,
},
expandRowByDefault: {
  type: Boolean,
  default: false,
},
useCheckbox: {
  type: Boolean,
  default: false,
},
useIcon: {
  type: Boolean,
  default: true,
},
useRowDelete: {
  type: Boolean,
  default: false,
},
showChildCount: {
  type: Boolean,
  default: false,
},
rowHoverBackground: {
  type: String,
  default: '#e0e0e0',
},
expandable: {
  type: Boolean,
  default: true,
},

9. Events.

// node click
<Tree :nodes="data" @nodeClick="onNodeClick" />
const onNodeClick = (node) => {
  console.log(node);
};

// Node expanded
<Tree :nodes="data" @nodeExpanded="onNodeExpanded" />
const onNodeExpanded = (node, state) => {
  console.log('node: ', node);
  console.log('state: ', state);
};

// Node updated
<Tree :nodes="data" @update:nodes="onUpdate" />
const onUpdate = (nodes) => {
  console.log('nodes: ', nodes);
};

Preview:

Download Details:

Author: wopehq

Live Demo: https://codesandbox.io/s/boring-leaf-v7b2s?file=/src/App.vue

Download Link: https://github.com/wopehq/vue3-tree/archive/refs/heads/main.zip

Official Website: https://github.com/wopehq/vue3-tree

Install & Download:

# Yarn
$ yarn add vue3-tree

# NPM
$ npm i vue3-tree