Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@wchbrad/vue-easy-tree

Package Overview
Dependencies
Maintainers
0
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@wchbrad/vue-easy-tree

A Vue.js project

  • 1.0.13
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
377
decreased by-29.14%
Maintainers
0
Weekly downloads
 
Created
Source

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:

:warning: 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";

: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 @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

Keywords

FAQs

Package last updated on 14 Sep 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc