基于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的支持
- checkbox
- async loading
- drag and drop
- context menu
- button
- customizable appearance
- touch support
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>- MIT
- it is free for commercial use.
- click here for vue2 support.