A Tree View Highlight Selected Library for Vue 3 Plugin

vue3-tree is a searchable, nested tree rendering component based on the Vue 3 Composition API.

material tree highlight selected, tree view example stackblitz, vue tree component examples, dynamic tree view, bootstrap nested tree view

Check Here – A Pretty JSON Data Formatter Tree View Component For Vue.js

How to make use of it:

Install and download:

# Yarn
$ yarn add vue3-tree

# NPM
$ npm i vue3-tree --save

1. Install and register the tree component.

import { ref } from "vue";
import Tree from "vue3-tree";
export default {
  components: {
    Tree,
  },
  // ...
};

2. Add the tree component with the search field to the form.

<template>
  <input v-model="searchText" type="text" />
  <Tree
    :nodes="data"
    :search-text="searchText"
    @onNodeExpanded="onNodeExpanded"
    @onCheckboxToggle="onCheckboxToggle"
    @onDataUpdated="onDataUpdated"
    @onToggleParentCheckbox="onToggleParentCheckbox"
  />
</template>

3. Render a tree in your application.

export default {
  components: {
    Tree,
  },
  setup() {
    const data = ref([
      {
        id: "1",
        label: "a",
        nodes: [
          {
            id: "4",
            label: "aa",
          },
          {
            id: "5",
            label: "ab",
          },
        ],
      },
      {
        id: "2",
        label: "b",
        nodes: [
          {
            id: "6",
            label: "ba",
            nodes: [
              {
                id: "11",
                label: "aaaa",
                nodes: [
                  {
                    id: "15",
                    label: "aaaa",
                  },
                  {
                    id: "16",
                    label: "bbbb",
                  },
                ],
              },
              {
                id: "12",
                label: "bbbb",
              },
            ],
          },
          {
            id: "7",
            label: "bb",
            nodes: [
              {
                id: "13",
                label: "cccc",
              },
              {
                id: "14",
                label: "dddd",
              },
            ],
          },
        ],
      },
      {
        id: "3",
        label: "c",
      },
    ]);
    const searchText = ref("");
    const onNodeExpanded = (node, state) => {
      // console.log('state: ', state)
      // console.log('node: ', node)
    };
    const onCheckboxToggle = (node, state) => {
      // console.log('checkbox state: ', state)
      // console.log('checkbox node: ', node)
    };
    const onToggleParentCheckbox = (node, state) => {
      // console.log('parent checkbox state: ', state)
      // console.log('parent checkbox node: ', node)
    };
    return {
      data,
      searchText,
      onNodeExpanded,
      onCheckboxToggle,
      onToggleParentCheckbox,
    };
  },
};

4. Component props available.

nodes: {
  type: Array,
  required: true,
},
props: {
  type: Object,
  default() {
    return {
      nodes: 'nodes',
      label: 'label',
    }
  },
},
indentSize: {
  type: Number,
  default: 10,
},
gap: {
  type: Number,
  default: 10,
},
searchText: {
  type: String,
  default: '',
},
expandRowByDefault: {
  type: Boolean,
  default: false,
},
expandAllRowsOnSearch: {
  type: Boolean,
  default: true,
},

5. TreeRow props available.

node: {
  type: Object,
  required: true,
},
indentSize: {
  type: Number,
  required: true,
},
gap: {
  type: Number,
  required: true,
},
expandRowByDefault: {
  type: Boolean,
  default: false,
},

Nested Tree View Component, vue3 tree Plugin/Github

Read More – 

Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview
Awfully Basic JavaScript Treeview Component Library


See Demo And Download

Official Website(teamseodo): Click Here

This superior jQuery/javascript plugin is developed by teamseodo. For extra Advanced usage, please go to the official website.

Share