Skip to content

A tree component based on vue2.x that supports a small amount of data or a large amount of data, multiple functions, and virtual scrolling.

License

Notifications You must be signed in to change notification settings

wchbrad/vue-easy-tree

Folders and files

NameName
Last commit message
Last commit date

Latest commit

e579200 · Sep 14, 2024

History

33 Commits
Sep 14, 2024
Sep 14, 2024
Oct 14, 2022
Oct 22, 2021
Dec 22, 2021
Oct 22, 2021
Oct 22, 2021
Feb 15, 2022
Feb 15, 2022
Oct 14, 2022
Oct 14, 2022
Oct 22, 2021
Oct 22, 2021
Sep 14, 2024
Oct 22, 2021

Repository files navigation

npm vue2 last commit NPM downloads license

vue-easy-tree

English | 中文

Introduction

A tree component based on vue2.x that supports a small amount of data or a large amount of data, multiple functions, and virtual scrolling.

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

v1.0 Feature List npm

  • Large data volume supports virtual scrolling
  • Display of basic tree data
  • Support checkbox selection
  • Support lazy loading
  • Expanded by default and selected by default
  • Disable node
  • Select nodes and obtain selected node information in a variety of ways
  • Support custom node content
  • Support node filtering
  • Support accordion mode under non-virtual scrolling
  • Support node drag and drop when non-lazy loading

Features

  • Support virtual scrolling
  • Not only supports tree-shaped data display with large amounts of data, but also supports data manipulation and modification

Install

npm install @wchbrad/vue-easy-tree

or

yarn add @wchbrad/vue-easy-tree

Mount

mount with global

Import in the main.js file:

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

Vue.use(VueEasyTree)

mount with component

Import in the component:

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

export default {
  components: {
    VueEasyTree
  }
}

Usage:

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

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

<script>
export default {
  data() {
    return {
      props: {
        label: "name",
        children: "children"
      },
      treeData: []
    };
  },
  created() {
    const data = [],
      root = 8,
      children = 3,
      base = 1000;
    for (let i = 0; i < root; i++) {
      data.push({
        id: `${i}`,
        name: `test-${i}`,
        children: []
      });
      for (let j = 0; j < children; j++) {
        data[i].children.push({
          id: `${i}-${j}`,
          name: `test-${i}-${j}`,
          children: []
        });
        for (let k = 0; k < base; k++) {
          data[i].children[j].children.push({
            id: `${i}-${j}-${k}`,
            name: `test-${i}-${j}-${k}`
          });
        }
      }
    }
    this.treeData = data;
  }
};
</script>

Change SCSS variables in the project

By creating a new style file, such as: ve-tree-var.scss, write the following content:

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

/* Change the icon font path variable, required */
$--font-path: "~@wchbrad/vue-easy-tree/src/assets/fonts";

@import "@wchbrad/vue-easy-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 @wchbrad/vue-easy-tree is located.

Then directly import the above style files in main.js

import Vue from 'vue'
import VueEasyTree from "@wchbrad/vue-easy-tree";
import "./css/ve-tree-var.scss"

Vue.use(VueEasyTree)

Other properties and methods

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

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

Quick view of examples and api

License

MIT

About

A tree component based on vue2.x that supports a small amount of data or a large amount of data, multiple functions, and virtual scrolling.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published