- Support drag, check, multiple check, bigData virtual scroll, lazy load, checkStrictly, add and delete node, etc.
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>
Virtual tree render big data (100000 node):
checkbox:
-
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)
| Property | Type | Description | Default |
|---|---|---|---|
| treeData | Array[Object] | 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 | - |
| 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 }) |
Welcome to improve this component with any issue, pull request or code review.