# twtree

**Repository Path**: TinyWisp/twtree

## Basic Information

- **Project Name**: twtree
- **Description**: 基于vue的树形组件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 8
- **Forks**: 1
- **Created**: 2020-08-02
- **Last Updated**: 2024-07-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TWTree
[![GitHub](https://img.shields.io/github/license/tinywisp/twtree)](https://github.com/TinyWisp/twtree/blob/master/LICENSE)
[![npm](https://img.shields.io/npm/v/twtree)](https://www.npmjs.com/package/twtree)
[![codecov](https://codecov.io/gh/TinyWisp/twtree/branch/master/graph/badge.svg)](https://codecov.io/gh/TinyWisp/twtree)
![Travis (.org)](https://img.shields.io/travis/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
<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://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
<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>

 ```

## 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