TinyWisp/vue-tree

a highly customizable tree component for vue 3

VueTree

基于vue3的树形组件。

• 主要特色
• 开始使用
• 文档
• 示例
• 开源协议
• vue 2

A highly customizable tree component for vue3.

• Features
• Getting Started
• Document
• Demos
• License
• vue 2

主要特色

• 支持复选框
• 可异步加载
• 拖放操作
• 右键菜单
• 按钮
• 自定义外观
• 触屏支持

文档

• 文档

开始使用

npm

  npm install @tinywisp/vue-tree --save

引入

  import VueTree from '@tinywisp/vue-tree'

示例

<template>
 <div id="app">
   <vue-tree :tree="tree" ref="tree" class="tree" />
 </div>
</template>

<script>
import VueTree from '@tinywisp/vue-tree'

export default {
 name: 'App',
 components: {
   VueTree
 },
 data() {
   return {
     tree: [
       {
         id: 1,
         title: 'ROOT',
         hasChild: true,
         children: [
           {
             id: 2,
             title: 'child 1',
           },
           {
             id: 3,
             title: 'child 2',
             hasChild: true,
             children: [
               {
                 id: 4,
                 title: 'child 2-1'
               },
               {
                 id: 5,
                 title: 'child 2-2'
               },
               {
                 id: 6,
                 title: 'child 2-3'
               }
             ],
           },
           {
             id: 7,
             title: 'child 3'
           },
           {
             id: 8,
             title: 'child 4'
           }
         ]
       }
     ]
   }
 }
}
</script>

<style scoped>
.tree {
 width: 200px;
 height: 300px;
}
</style>

示例

• 示例

开源协议

• MIT
• 无论个人还是公司，都可以免费自由使用

vue2

• 点击此处查看对vue2的支持

---

Features

• checkbox
• async loading
• drag and drop
• context menu
• button
• customizable appearance
• touch support

Getting Started

npm

  npm install @tinywisp/vue-tree --save

import the library

  import VueTree from '@tinywisp/vue-tree'

usage

<template>
 <div id="app">
   <vue-tree :tree="tree" ref="tree" class="tree" />
 </div>
</template>

<script>
import VueTree from '@tinywisp/vue-tree'

export default {
 name: 'App',
 components: {
   VueTree
 },
 data() {
   return {
     tree: [
       {
         id: 1,
         title: 'ROOT',
         hasChild: true,
         children: [
           {
             id: 2,
             title: 'child 1',
           },
           {
             id: 3,
             title: 'child 2',
             hasChild: true,
             children: [
               {
                 id: 4,
                 title: 'child 2-1'
               },
               {
                 id: 5,
                 title: 'child 2-2'
               },
               {
                 id: 6,
                 title: 'child 2-3'
               }
             ],
           },
           {
             id: 7,
             title: 'child 3'
           },
           {
             id: 8,
             title: 'child 4'
           }
         ]
       }
     ]
   }
 }
}
</script>

<style scoped>
.tree {
 width: 200px;
 height: 300px;
}
</style>

Document

• Document

Demos

• Demos

License

• MIT
• it is free for commercial use.

vue 2

• click here for vue2 support.