Skip to content

TinyWisp/vue-tree

Repository files navigation

VueTree

GitHub npm codecov

基于vue3的树形组件。

A highly customizable tree component for vue3.

主要特色

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

文档

开始使用

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


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

Demos

License

  • MIT
  • it is free for commercial use.

vue 2

About

a highly customizable tree component for vue 3

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages