A tree view component for Vue 3.
Install using your package manager of choice:
yarn add vue-tree-viewhttps://matija-components.vercel.app/tree-view
Import the component locally or define it globally and include the css file:
<template> <div style="display: flex"> <tree-view color="blue" :items="treeViewItems" v-model="treeViewSelection" dense open-all /> {{ treeViewSelection.sort() }} </div> </template> <script lang="ts" setup> import { ref } from "vue"; import { TreeView } from "vue-tree-view"; import "vue-tree-view/dist/style.css"; const treeViewItems = [ { id: 1, name: "ID 1", children: [ { id: 2, name: "ID 2" }, { id: 3, name: "ID 3" }, { id: 4, name: "ID 4" } ] }, { id: 5, name: "ID 5", children: [ { id: 6, name: "ID 6", children: [ { id: 7, name: "ID 7", children: [ { id: 8, name: "ID 8" }, { id: 9, name: "ID 9" } ] } ] }, { id: 10, name: "ID 10", children: [ { id: 11, name: "ID 11", children: [ { id: 12, name: "ID 12" }, { id: 13, name: "ID 13" }, { id: 14, name: "ID 14" } ] } ] } ] } ]; const treeViewSelection = ref([]); </script>| Name | Type | Default | Description |
|---|---|---|---|
v-model | number[] | Standard two way input | |
dense | boolean | false | Changes the style of the component to a more compact design |
open-all | boolean | false | All nodes will be opened on component load |
disabled | boolean | false | Makes the component uninteractable |
selectable | boolean | true | Allows the user to select nodes |
radio | boolean | false | Alternate selection item, uses a radio instead of the default checkbox |
unopenable | boolean | false | Prevents the user from opening and closing the nodes |
selection-mode | independent or leaf | leaf | Changes the way selection is handled, leaf selects all of the children if clicking on a parent, independent selects a node without triggering any others |
color | string | #7e7ec2 | Color of the active checkboxes |
items | NodeItem | [] | Items used by the tree view, every item must be defined with an id for a value and name for a label, the children property is optional |