基于 vue 的树形组件。

主要特色

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

开始使用

npm

npm install twtree --save

引入

import TWTree from 'twtree'

示例

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

<script>
import TWTree from 'twtree'

export default {
 name: 'App',
 components: {
   TWTree
 },
 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>

---

官网：https://github.com/TinyWisp/twtree

演示：https://www.vue365.cn/code_demo.php?id=3659

GitHub下载：https://github.com/TinyWisp/twtree/archive/master.zip