https://github.com/chendonming/virtualtree
virtual tree for vue2.x
https://github.com/chendonming/virtualtree
tree virtual-tree vue vuejs
Last synced: 2 months ago
JSON representation
virtual tree for vue2.x
- Host: GitHub
- URL: https://github.com/chendonming/virtualtree
- Owner: chendonming
- Created: 2022-07-14T07:07:38.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T06:21:33.000Z (over 3 years ago)
- Last Synced: 2024-11-18T04:24:30.336Z (over 1 year ago)
- Topics: tree, virtual-tree, vue, vuejs
- Language: Vue
- Homepage: https://5kgy3l.csb.app/
- Size: 319 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.en.md
Awesome Lists containing this project
README
## virtual tree
> This component is developed for Vue2.x, Vue3.x is under development
> Open source is not easy. If it helps you a little, click on a free start. This will be the whole motivation for me to update and maintain.
### introduce
The virtual list is actually an implementation of on-demand display, that is, only the visible area is rendered.
A technique that does not render or partially renders data in non-visible areas, resulting in extremely high rendering performance.
After the baptism of tens of thousands of WebGl components, it still stands and is trustworthy.
Click to view demo via codesanbox
## use
````js
import VirtualTree from "virtualtree-vue2";
import "virtualtree-vue2/lib/virtualtree-vue2.css";
Vue.use(VirtualTree);
````
```html
export default {
data() {
return {
props: {
children: "TestChildren",
label: "Label",
key: "uuid",
},
}
}
}
````
Because the virtual tree needs to determine the area by scrolling the viewport, the DOM occupied by `virtual-tree` must have a height when initialized, and this height can be set by the parent.
Slots can be defined for each row of data
```html
{{ text }} {{ parentName }}
````
The data of the current node will be injected into the default slot. `parentName` is an automatically generated associated parent field, a string like breadcrumbs
````
All > Node 1 > Byte 2
````
When you click on the corresponding node, an `active` className will be added, and you can set the style yourself to define the effect of the click
````css
.treeitem_content_label.active {
}
````
## API
### handleChecked(obj, bool)
Check a piece of data, it will be automatically checked
- obj row data
- bool true: checked false: unchecked
````js
// eg:
this.$refs.tree.handleChecked(row, true)
````
### handleExpanded(obj, bool)
Expand or close a node. It will automatically expand or close the association
- obj row data
- bool true: expand false: close
````js
// eg:
this.$refs.tree.handleExpanded(row, true)
````