# vue-virtual-scroll-tree

> Vue Virtual Scroll Tree

Latest version **0.1.3** (published 2021-06-10) · 0 weekly downloads

## Install

```sh
npm install vue-virtual-scroll-tree
pnpm add vue-virtual-scroll-tree
yarn add vue-virtual-scroll-tree
bun add vue-virtual-scroll-tree
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2021-06-10 |
| First published | 2021-06-10 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Ricky |
| Maintainers | fantasy9830 |
| Keywords | vue, vue3, virtual-scroll, tree |

## Links

- npm: https://www.npmjs.com/package/vue-virtual-scroll-tree
- Repository: https://github.com/fantasy9830/vue-virtual-scroll-tree
- Homepage: https://github.com/fantasy9830/vue-virtual-scroll-tree#readme
- Issues: https://github.com/fantasy9830/vue-virtual-scroll-tree/issues
- npm.io page: https://npm.io/package/vue-virtual-scroll-tree

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^3.0.0
- [uuid](https://npm.io/package/uuid.md) ^8.3.2
- [vuex](https://npm.io/package/vuex.md) ^4.0.0-0
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [vue-router](https://npm.io/package/vue-router.md) ^4.0.0-0

## Recent versions

- 0.1.3 (latest) — 2021-06-10
- 0.1.2 — 2021-06-10
- 0.1.1 — 2021-06-10

## README

# Vue Virtual Scroll Tree

```Vue 3 + Virtual Scroll + Tree```

## Install

```shell
npm install --save vue-virtual-scroll-tree
```

## Quick Start

``` javascript
import Vue from 'vue'
import VueVirtualScrollTree from 'vue-virtual-scroll-tree'

Vue.use(VueVirtualScrollTree)

// or
import { VueVirtualScrollTree } from 'vue-virtual-scroll-tree'

Vue.component(VueVirtualScrollTree.name, VueVirtualScrollTree)
```

## Basic Usage

```html
<template>
  <VueVirtualScrollTree :data="treeData">
    <template v-slot="{ item }">
      <span>{{ item.label }}</span>
    </template>
  </VueVirtualScrollTree>
</template>

<script>
export default {
  data () {
    return {
      treeData: [
        {
          label: 'Level one 1',
          children: [
            {
              label: 'Level two 1-1',
              children: [
                {
                  label: 'Level three 1-1-1'
                }
              ]
            },
            {
              label: 'Level two 1-2'
            }
          ]
        },
        {
          label: 'Level one 2'
        }
      ]
    }
  }
}
</script>
```

## Build

```shell
npm run build
```

## Attributes

| Attribute          | Description                                                                                                    | Type                  | Default |
| ------------------ | -------------------------------------------------------------------------------------------------------------- | --------------------- | ------- |
| data               | tree data                                                                                                      | array                 | []      |
| empty-text         | text displayed when data is void                                                                               | string                | No Data |
| highlight-current  | whether current node is highlighted                                                                            | boolean               | true    |
| default-expand-all | whether to expand all nodes by default                                                                         | boolean               | true    |
| showIcon           | shows the icon before a node's label.                                                                          | boolean               | true    |
| showLine           | shows a connecting line                                                                                        | boolean               | true    |
| filter-node-method | this function will be executed on each node when use filter method. if return false, tree node will be hidden. | Function(value, data) | —       |
| timeout            | refresh timeout                                                                                                | number                | 17      |
| option             | configuration options, see the following table                                                                 | object                | —       |

## Option

| Attribute  | Description                   | Type   | Default |
| ---------- | ----------------------------- | ------ | ------- |
| height     | config virtual scroll height. | number | 500     |
| itemHeight | config node's height.         | number | 24      |

## Node props

| Attribute | Description       | Type    |
| --------- | ----------------- | ------- |
| label     | node's label      | string  |
| children  | node's subtree    | string  |
| disabled  | disables the node | boolean |

## Method

| Method | Description                                          | Parameters                                                                      |
| ------ | ---------------------------------------------------- | ------------------------------------------------------------------------------- |
| filter | filter all tree nodes, filtered nodes will be hidden | Accept a parameter which will be used as first parameter for filter-node-method |

## Events

| Event Name | Description                     | Parameters                                    |
| ---------- | ------------------------------- | --------------------------------------------- |
| node-click | triggers when a node is clicked | node object corresponding to the node clicked |

## Scoped Slot

| Name | Description                                                    |
| ---- | -------------------------------------------------------------- |
| —    | Custom content for tree nodes. The scope parameter is { item } |

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