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:
Changelog:
v0.11.5 (01/11/2023)
- Bugfix
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