English | 中文

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.

• 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

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

npm install @wchbrad/vue-easy-tree 

or

yarn add @wchbrad/vue-easy-tree 

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)

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

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

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)

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

MIT