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)
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 } |