1.5.0 • Published 3 days ago
vue-tree-view v1.5.0
🚀 Installation
Install using your package manager of choice:
yarn add vue-tree-view
📺 Demo
https://matija-components.vercel.app/tree-view
⚙️ Usage
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>
📃 Props
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 |
1.5.0
3 days ago
1.4.0
4 days ago
1.3.0
1 month ago
1.1.0
2 months ago
0.0.15
2 months ago
0.0.13
2 months ago
0.0.11
7 months ago
0.0.12
7 months ago
0.0.10
12 months ago
0.0.1
12 months ago
0.0.3
12 months ago
0.0.9
12 months ago
0.0.8
12 months ago
0.0.5
12 months ago
0.0.4
12 months ago
0.0.7
12 months ago
0.0.6
12 months ago
1.0.2
7 years ago
1.0.1
7 years ago
1.0.0
7 years ago