1.0.2 • Published 3 years ago
light-vue-tree v1.0.2
Tree component based on Vue implementation
- Support drag, check, multiple check, bigData virtual scroll, lazy load, checkStrictly, add and delete node, etc.
Simple usage
npm install light-vue-tree<template>
<div class="base">
<VueTree
ref="tree1"
draggable
:treeData="treeData"
@on-drop="dropNode"
@on-selected-change="clickNode"
/>
</div>
</template>
<script>
import { treeData } from '../../assets/treeData'
export default {
name: 'Base',
data () {
return {
treeData
}
},
methods: {
dropNode({ parentNode, targetNode, callback }) {
console.log("dropNode", parentNode, targetNode);
callback(targetNode);
},
clickNode (node) {
console.log('clickNode', node)
}
}
}
</script>Screenshots
Virtual tree render big data (100000 node):
checkbox:
Advantages
Simple and very easy to use.
Big data list with high render performance and efficient.
Can Customize following components (e.g. checkbox, expand icon, loading)
Api
props
| Property | Type | Description | Default | |
|---|---|---|---|---|
| treeData | ArrayObject | The treeNodes data Array,if set it then you need not to construct children TreeNode.(key should be unique across the whole array) | - | |
| showCheckbox | boolean | Add a Checkbox before the treeNodes | false | |
| draggable | boolean | Whether to allow dropping on the node | false | |
| checkStrictly | boolean | Check treeNode precisely; parent treeNode and children treeNodes are not associated | false | |
| lazy | boolean | Lazy load node data | false | |
| load | function | Load data asynchronously | function(node) | - |
| immediatelyLoad | boolean | First load data when lazy load | false | |
| virtual | boolean | Disable virtual scroll when set to false | false | |
| height | number | When virtual scroll must set | - | |
| expandedAll | boolean | Whether to expand all treeNodes by default | - | |
| keeps | number | How many items you are expecting the virtual list to keep rendering in the real dom. | 30 | |
| searchVal | String | Search keywords | - |
Events
| Property | Type | Description | Params |
|---|---|---|---|
| on-selected-change | function | Callback function for when the user right clicks a treeNode | function(node) |
| on-drop | function | Callback function for when the user drag node | function({ parentNode, targetNode, callback }) |
| on-checked-item | function | Callback function for when the user check node | function({ node, vNode }) |
| on-checked-change | function | Callback function for when checkbox change | function({ node, selectedData }) |
Scoped Slot
| name | Description |
|---|---|
| loading | customize loading component, params({loading}) |
| check | customize check component, params({handleClickCheckBox, selectToggle, node}) |
| expandIcon | customize expand icon and unexpanded icon, params({ expanded, toggleFold }) |
Contributions
Welcome to improve this component with any issue, pull request or code review.