# vue-treeselect

> a tree select plugin for vue2

Latest version **1.0.7** (published 2018-04-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-treeselect
pnpm add vue-treeselect
yarn add vue-treeselect
bun add vue-treeselect
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2018-04-28 |
| First published | 2017-09-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 398 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 43 |
| Author | zdy1988 |
| Maintainers | zdy1988 |
| Keywords | vue2, tree, select |

## Links

- npm: https://www.npmjs.com/package/vue-treeselect
- Repository: https://github.com/zdy1988/vue-treeselect
- Homepage: https://github.com/zdy1988/vue-treeselect#readme
- Issues: https://github.com/zdy1988/vue-treeselect/issues
- npm.io page: https://npm.io/package/vue-treeselect

## Recent versions

- 1.0.7 (latest) — 2018-04-28
- 1.0.6 — 2017-12-19
- 1.0.5 — 2017-12-14
- 1.0.4 — 2017-11-10
- 1.0.3 — 2017-11-09
- 1.0.2 — 2017-11-06
- 1.0.1 — 2017-11-06
- 1.0.0 — 2017-09-29

## README

# vue-treeselect

[![npm](https://img.shields.io/npm/dt/vue-treeselect.svg?style=flat-square)](https://github.com/zdy1988/vue-treeselect)

##  Introduction

A tree plugin for vue2

<img src="./pic.png" width="100%" align=center />

This Plugin is based on [vue-jstree](https://github.com/zdy1988/vue-jstree), Some "props" can be used for reference !

##  DEMO

[http://zdy1988.github.io/vue-treeselect](http://zdy1988.github.io/vue-treeselect)

##  NPM

```html
    npm install vue-treeselect
```

##  ES6

```html
    import VTreeselect from 'vue-treeselect'
    
    new Vue({
      components: {
        VTreeselect
      }
    })
```

##  Setup

```html
    npm install
    npm run dev
```

## Usage

```html
    <v-tree-select :data="data" value-field-name="id" v-model="selectItem"></v-tree-select>
    
      new Vue({
        el: '#app',
        data: {
          data: [
            {
              "id": 1,
              "text": "Same but with checkboxes",
              "children": [
                {
                  "id": 2,
                  "text": "initially selected",
                },
                {
                  "id": 3,
                  "text": "custom icon",
                },
                {
                  "id": 4,
                  "text": "initially open",
                  "children": [
                    {
                      "id": 5,
                      "text": "Another node"
                    }
                  ]
                },
                {
                  "id": 6,
                  "text": "custom icon",
                },
                {
                  "id": 7,
                  "text": "disabled node",
                  "disabled": true
                }
              ]
            },
            {
              "id": 8,
              "text": "Same but with checkboxes",
              "children": [
                {
                  "id": 9,
                  "text": "initially selected",
                },
                {
                  "id": 10,
                  "text": "custom icon",
                },
                {
                  "id": 11,
                  "text": "initially open",
                  "children": [
                    {
                      "id": 12,
                      "text": "Another node"
                    }
                  ]
                },
                {
                  "id": 13,
                  "text": "custom icon",
                },
                {
                  "id": 14,
                  "text": "disabled node",
                  "disabled": true
                }
              ]
            },
            {
              "id": 15,
              "text": "And wholerow selection"
            }
          ],
          selectItem: null
        }
      })
```

## API

| Props        | Type           | Default  |  Describe  |
| ------------- |:-------------:|:-----:|:--------------------------------------------------------|
| placeholder      | String |  |  set  placeholder |
| data      | Array |  |  set tree data  |
| size      | String      |   |  set tree item size , value : 'large' or '' or ''small' |
| show-checkbox | Boolean      |    false |  set it show checkbox |
| allow-transition | Boolean      |    true | allow use transition animation  |
| whole-row | Boolean      |    false | use whole row state |
| no-dots | Boolean      |    false | show or hide dots || collapse | Boolean      |    false |  set all tree item collapse state |
| multiple | Boolean      |    false |  set multiple selected tree item  |
| allow-batch | Boolean      |    false | in multiple choices. allow batch select  |
| text-field-name | String      |    'text' |  set tree item display field |
| value-field-name | String      |    'value' |  set tree item value field |
| children-field-name | String      |    'children' |  set tree item children field |
| async | Function      |     |  async load callback function , if node is a leaf ,you can set 'isLeaf: true' in data  |
| loading-text | String      |    'Loading' |  set loading text |
| klass | String      |     |  set append tree class |

## Data Item Optional Properties

| Name        | Type           | Default  | Describe  |
| ------------- |:-------------:| -----:|:----------------------------------------------|
| icon      | String      |   | custom icon css class |
| opened | Boolean      |    false | set leaf opened |
| selected | Boolean      |    false | set node selected |
| disabled | Boolean      |    false | set node disabled |
| isLeaf | Boolean      |    false | if node is a leaf , set true can hide '+' |

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