Minimal Nested Tree View Component For Vue.js – Teatree

Description:

A lightweight, dependency-free Vue.js component to render a nested, collapsible tree view from any data structure you define.

How to use it:

1. Import the Teatree into your Vue.js project.

import { Teatree, NodeType, NodeName, NodeToggle } from "vue-teatree";

2. Add the Teatree component to the template.

<Teatree :roots="data">
  <template slot="node-toggle" slot-scope="{ node }">
    <NodeToggle :node="node" />
  </template>
  <template slot="node-name" slot-scope="{ node }">
    <NodeName
      :node="node"
      :handleNodeLeftClick="() => {}"
      :handleNodeRightClick="() => {}"
    />
  </template>
</Teatree>

3. Pass your data to the tree view.

  • name: node name
  • show: show or hide the node
  • showChildren: show children
  • selected: is selected or not
  • children: child nodes
  • icon: custom icon
const data: NodeType[] = [
  {
    name: "node-1",
    show: true,
    showChildren: true,
    selected: false,
    children: [
      {
        name: "node-1-1",
        show: true,
        showChildren: true,
        selected: false,
        children: [
          {
            name: "node-1-1-1",
            show: true,
            showChildren: true,
            selected: false,
            children: [],
          },
        ],
      },
    ],
  },
];

Download Details:

Author: sarimabbas

Live Demo: https://sarimabbas.github.io/vue-teatree/

Download Link: https://github.com/sarimabbas/vue-teatree/archive/master.zip

Official Website: https://github.com/sarimabbas/vue-teatree

Install & Download:

# Yarn
$ yarn add vue-teatree

# NPM
$ npm i vue-teatree --save

You Might Be Interested In:

Tags:

Add Comment