https://github.com/wchbrad/vue-easy-tree
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.
https://github.com/wchbrad/vue-easy-tree
checkbox lazyload tree virtualscroll vue2
Last synced: about 1 month ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/wchbrad/vue-easy-tree
- Owner: wchbrad
- License: mit
- Created: 2021-10-15T08:21:46.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-09-14T06:32:23.000Z (over 1 year ago)
- Last Synced: 2025-11-27T12:16:33.712Z (4 months ago)
- Topics: checkbox, lazyload, tree, virtualscroll, vue2
- Language: JavaScript
- Homepage:
- Size: 461 KB
- Stars: 150
- Watchers: 1
- Forks: 43
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@wchbrad/vue-easy-tree)
[](https://vuejs.org/)
[](https://www.npmjs.com/package/@wchbrad/vue-easy-tree)
[](https://npmjs.org/package/@wchbrad/vue-easy-tree)
[](http://www.opensource.org/licenses/mit-license.php)
# vue-easy-tree
**English** | [中文](./README.zh-CN.md)
## 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](https://element.eleme.cn/#/en-US/component/tree)(License:MIT), combined with [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller)(License:MIT) tree component.
## v1.0 Feature List [](https://www.npmjs.com/package/@wchbrad/vue-easy-tree)
- 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:
```JS
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：
```JS
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
```html
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;
}
};
```
## Change SCSS variables in the project
By creating a new style file, such as: `ve-tree-var.scss`, write the following content：
```JS
/* 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`：
```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](https://element.eleme.cn/#/en-US/component/tree)**
**When you need to use virtual scrolling, just add the `height` property, such as:**
```html
```
**[Quick view of examples and api](./element-ui-tree.md)**
## License
[MIT](http://www.opensource.org/licenses/mit-license.php)