@duzhijie/vue-virtual-scroll-tree

Introduction

vue2.x virtual scrolling tree component .

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

yarn add el-virtual-scroll-tree

Mount

mount with global

Import in the main.js file:

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

Vue.use(VueVirtualScrollTree)

mount with component

Import in the component：

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

export default {
  components: {
    VueVirtualScrollTree
  }
}

Usage:

⚠️ When using virtual scrolling, node-key must be set

<template>
  <div class="vue-virtual-scroll-tree" style="height:calc(100vh - 20px)">
  <!-- Just remove the height parameter when not using virtual scrolling -->
    <vue-virtual-scroll-tree
      ref="veTree"
      node-key="id"
      height="calc(100vh - 20px)"
      :data="treeData"
      :props="props"
    ></vue-virtual-scroll-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      props: {
        label: "name",
        children: "children"
      },
      treeData: []
    };
  },
};
</script>

Change SCSS variables in the project

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

/* 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";

⚠️ 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：

import Vue from 'vue'
import VueVirtualScrollTree from "@duzhijie/vue-virtual-scroll-tree";
import "./css/vue-virtual-scroll-tree-var.scss"

Vue.use(VueVirtualScrollTree)

Other properties and methods

From element-ui official document
When you need to use virtual scrolling, just add the height property, such as:

<vue-virtual-scroll-tree :data="data" height="calc(100vh - 20px)" :props="defaultProps" @node-click="handleNodeClick"></vue-virtual-scroll-tree>

Quick view of examples and api

License

MIT