Vue Virtual Scroll Tree

Vue 3 + Virtual Scroll + Tree

Install

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

Quick Start

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

<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

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 }