# twtree

> A highly customizable tree component for vue, which features checkbox, async loading, drag and drop, context menu and custom appearance.

Latest version **4.3.1** (published 2023-08-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install twtree
pnpm add twtree
yarn add twtree
bun add twtree
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.3.1 |
| Published | 2023-08-27 |
| First published | 2020-04-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 513.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 39 |
| Author | yinquan |
| Maintainers | tinywisp |
| Keywords | vue, tree, vue tree, checkbox, draggable, custom appearance |

## Links

- npm: https://www.npmjs.com/package/twtree
- Repository: https://github.com/TinyWisp/twtree
- Issues: https://github.com/TinyWisp/twtree/issues
- npm.io page: https://npm.io/package/twtree

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.14
- [core-js](https://npm.io/package/core-js.md) ^3.22.4

## Recent versions

- 4.3.1 (latest) — 2023-08-27
- 4.3.0 — 2023-08-27
- 4.2.1 — 2023-01-22
- 4.2.0 — 2023-01-17
- 4.1.0 — 2023-01-14
- 4.0.1 — 2023-01-11
- 3.8.3 — 2022-05-14
- 3.8.2 — 2022-05-09
- 3.8.1 — 2021-09-17
- 3.7.0 — 2021-07-13
- 3.6.0 — 2021-05-16
- 3.5.0 — 2021-04-16
- 3.4.0 — 2021-01-24
- 3.3.0 — 2020-12-29
- 3.2.0 — 2020-12-19
- … 39 more at https://npm.io/package/twtree/versions

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

---
_Source: https://npm.io/package/twtree · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._