- Notifications
You must be signed in to change notification settings - Fork43
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
wchbrad/vue-easy-tree
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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 fromelement-ui(License:MIT), combined withvue-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-treeor
yarn add @wchbrad/vue-easy-treeImport in themain.js file:
importVuefrom"vue";importVueEasyTreefrom"@wchbrad/vue-easy-tree";// Style file, you can customize the style or theme according to your needsimport"@wchbrad/vue-easy-tree/src/assets/index.scss"Vue.use(VueEasyTree)
Import in the component：
importVueEasyTreefrom"@wchbrad/vue-easy-tree";// Style file, you can customize the style or theme according to your needsimport"@wchbrad/vue-easy-tree/src/assets/index.scss"exportdefault{components:{ VueEasyTree}}
node-key must be set
<template><divclass="ve-tree"style="height:calc(100vh - 20px)"><!-- Just remove the height parameter when not using virtual scrolling --><vue-easy-treeref="veTree"node-key="id"height="calc(100vh - 20px)":data="treeData":props="props"></vue-easy-tree></div></template><script>exportdefault{data(){return{props:{label:"name",children:"children"},treeData:[]};},created(){constdata=[],root=8,children=3,base=1000;for(leti=0;i<root;i++){data.push({id:`${i}`,name:`test-${i}`,children:[]});for(letj=0;j<children;j++){data[i].children.push({id:`${i}-${j}`,name:`test-${i}-${j}`,children:[]});for(letk=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";
Then directly import the above style files inmain.js：
importVuefrom'vue'importVueEasyTreefrom"@wchbrad/vue-easy-tree";import"./css/ve-tree-var.scss"Vue.use(VueEasyTree)
Fromelement-ui official document
When you need to use virtual scrolling, just add theheight property, such as:
<vue-easy-tree:data="data"height="calc(100vh - 20px)":props="defaultProps"@node-click="handleNodeClick"></vue-easy-tree>
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
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.