el-virtual-scroll-tree

vue2.x virtual scrolling tree component .

$3

connection: 363305622@qq.com / duzhijie317@gmail.com

Introduction

Based on the tree style and function extracted from element-ui(License:MIT), combined with vue-virtual-scroller(License:MIT) tree component.

Large data volume supports virtual scrolling

Install

``
npm install el-virtual-scroll-tree
`

or

`
yarn add el-virtual-scroll-tree
`

Mount

$3

Import in the main.js file:

`JS
import Vue from "vue";
import ElVirtualScrollTree from "el-virtual-scroll-tree";
// Style file, you can customize the style or theme according to your needs
import "el-virtual-scroll-tree/src/assets/index.scss"

Vue.use(ElVirtualScrollTree)
`

$3

Import in the component：

`JS
import VUeVirtualScrollTree from "el-virtual-scroll-tree";
// Style file, you can customize the style or theme according to your needs
import "el-virtual-scroll-tree/src/assets/index.scss"

export default {
components: {
ElVirtualScrollTree
}
}
`

Props

`JS
data: Array

emptyText: String

renderAfterExpand: Boolean

nodeKey: String

checkStrictly: Boolean

defaultExpandAll: Boolean

expandOnClickNode: Boolean

checkOnClickNode: Boolean

checkDescendants: Boolean

itemSize: Number

gridItems: Number

autoExpandParent: Boolean

defaultCheckedKeys: Array

defaultExpandedKeys: Array

scrollToDefaultExpandedKey: [String, Number]

currentNodeKey: [String, Number]

renderContent: Function

showCheckbox: Boolean

draggable: Boolean

allowDrag: Function

allowDrop: Function

props: {
children: "children",
label: "label",
disabled: "disabled"
}
lazy: Boolean

highlightCurrent: Boolean

load: Function

filterNodeMethod: Function

accordion: Boolean

indent: Number

iconClass: String

height: [String, Number]

extraLine: Number

keeps: Number
`

Usage:

:warning: When using virtual scrolling, node-key must be set

`html


`

Change SCSS variables in the project


By creating a new style file, such as: vue-virtual-scroll-tree-var.scss, write the following content：

`JS
/ Change theme color variable /
$--color-primary: #ea5404;

/ Change the icon font path variable, required /
$--font-path: "~vue-virtual-scroll-tree/src/assets/fonts";

@import "vue-virtual-scroll-tree/src/assets/index.scss";
`
:warning: It should be noted that it is necessary to override the font path variable, and assign it to the relative path where the icon icon in el-virtual-scroll-tree is located.

Then directly import the above style files in main.js：
`JS
import Vue from 'vue'
import ElVirtualScrollTree from "el-virtual-scroll-tree";
import "./css/vue-virtual-scroll-tree-var.scss"

Vue.use(ElVirtualScrollTree)
`

Other properties and methods

From element-ui official document

When you need to use virtual scrolling, just add the height property, such as:
`html

``

Quick view of examples and api

License

MIT