https://github.com/tinywisp/twtree
a highly customizable tree component for vue 2
https://github.com/tinywisp/twtree
checkbox contextmenu draggable javascript tree vue vue-tree
Last synced: 8 months ago
JSON representation
a highly customizable tree component for vue 2
- Host: GitHub
- URL: https://github.com/tinywisp/twtree
- Owner: TinyWisp
- License: mit
- Created: 2020-03-21T15:34:31.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-08-27T15:39:26.000Z (over 2 years ago)
- Last Synced: 2025-05-07T17:44:49.198Z (8 months ago)
- Topics: checkbox, contextmenu, draggable, javascript, tree, vue, vue-tree
- Language: Vue
- Homepage:
- Size: 7.61 MB
- Stars: 40
- Watchers: 2
- Forks: 15
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# TWTree
[](https://github.com/TinyWisp/twtree/blob/master/LICENSE)
[](https://www.npmjs.com/package/twtree)
[](https://codecov.io/gh/TinyWisp/twtree)
基于vue的树形组件。
* [主要特色](#主要特色)
* [开始使用](#开始使用)
* [文档](https://github.com/TinyWisp/twtree/wiki/%E6%96%87%E6%A1%A3)
* [示例](https://tinywisp.github.io/twtree/#/zh/)
* [开源协议](#开源协议)
* [vue 3](#vue3)
A highly customizable tree component for vue.
* [Features](#features)
* [Getting Started](#getting-started)
* [Document](https://github.com/TinyWisp/twtree/wiki/Document)
* [Demos](https://tinywisp.github.io/twtree/#/en/)
* [License](#license)
* [vue 3](#vue-3)
## 主要特色
* 支持复选框
* 可异步加载
* 拖放操作
* 右键菜单
* 按钮
* 自定义外观
* 触屏支持
## 文档
* [文档](https://github.com/TinyWisp/twtree/wiki/%E6%96%87%E6%A1%A3)
## 开始使用
npm
```
npm install twtree --save
```
引入
```
import TWTree from 'twtree'
```
示例
```javascript
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'
}
]
}
]
}
}
}
.tree {
width: 200px;
height: 300px;
}
```
## 示例
* [示例](https://tinywisp.gitee.io/twtree/)
## 开源协议
* MIT
* 无论个人还是公司，都可以免费自由使用
## vue3
* [点击此处](https://github.com/TinyWisp/vue-tree)查看对vue3的支持
---
## Features
* checkbox
* async loading
* drag and drop
* context menu
* button
* customizable appearance
* touch support
## Getting Started
npm
```
npm install twtree --save
```
import the library
```
import TWTree from 'twtree'
```
usage
```javascript
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'
}
]
}
]
}
}
}
.tree {
width: 200px;
height: 300px;
}
```
## Document
* [Document](https://github.com/TinyWisp/twtree/wiki/Document)
## Demos
* [Demos](https://tinywisp.github.io/twtree/)
## License
* MIT
* it is free for commercial use.
## vue 3
* [click here](https://github.com/TinyWisp/vue-tree) for vue3 support