Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ce52b96

Browse files
author
M-Ray
committed
2 parents 9afa96c + 6c9f7e9 commit ce52b96

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+31606
-15537
lines changed

‎.babelrc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"presets": [
3+
["@babel/preset-env"], ["@vue/babel-preset-jsx", {
4+
"injectH": false
5+
}]
6+
]
7+
}

‎.eslintignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/node_modules
2+
/lib

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ node_modules
66
# local env files
77
.env.local
88
.env.*.local
9+
.history
910

1011
# Log files
1112
npm-debug.log*

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 M-Ray
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 98 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,101 @@
1-
#基于Vue实现的Tree组件支持拖拽
1+
## Tree component based on Vue implementation
22

3-
### 支持搜索,checkbox勾选,大数据量时的虚拟滚动
3+
* Support drag, check, multiple check, bigData virtual scroll, lazy load, checkStrictly, add and delete node, etc.
44

5-
### 更详细的API 正在整理中
5+
## Simple usage
6+
```bash
7+
npm install light-vue-tree
8+
```
69

10+
```js
11+
<template>
12+
<div class="base">
13+
<VueTree
14+
ref="tree1"
15+
draggable
16+
:treeData="treeData"
17+
@on-drop="dropNode"
18+
@on-selected-change="clickNode"
19+
/>
20+
</div>
21+
</template>
22+
<script>
23+
import { treeData } from '../../assets/treeData'
24+
export default {
25+
name: 'Base',
26+
data () {
27+
return {
28+
treeData
29+
}
30+
},
31+
methods: {
32+
dropNode({ parentNode, targetNode, callback }) {
33+
console.log("dropNode", parentNode, targetNode);
34+
callback(targetNode);
35+
},
36+
clickNode (node) {
37+
console.log('clickNode', node)
38+
}
39+
}
40+
}
41+
</script>
42+
43+
```
44+
45+
## Screenshots
46+
47+
Virtual tree render big data (100000 node):
48+
49+
<img src="./screenshots/virtualTree@2x.png">
50+
51+
52+
## Advantages
53+
* Simple and very easy to use.
54+
55+
* Big data list with high render performance and efficient.
56+
57+
* Can Customize following components (e.g. checkbox, expand icon, loading)
58+
59+
60+
## Api
61+
62+
### props
63+
64+
65+
Property | Type | Description | Default
66+
--- | --- | ---- | ----
67+
treeData |Array[Object] | <div style="width:200pt">The treeNodes data Array,if set it then you need not to construct children TreeNode.(key should be unique across the whole array)</div> | -
68+
showCheckbox | boolean | Add a Checkbox before the treeNodes | false
69+
draggable | boolean | Whether to allow dropping on the node | false
70+
checkStrictly | boolean | <div style="width: 200pt">Check treeNode precisely; parent treeNode and children treeNodes are not associated</div> | false
71+
lazy | boolean | Lazy load node data | false
72+
load | function |Load data asynchronously | function(node)| -
73+
immediatelyLoad | boolean | First load data when lazy load | false
74+
virtual | boolean | Disable virtual scroll when set to false | false
75+
height | number | When virtual scroll must set | -
76+
expandedAll | boolean | Whether to expand all treeNodes by default | -
77+
keeps | number | <div style="width: 200pt">How many items you are expecting the virtual list to keep rendering in the real dom.</div> | 30
78+
searchVal | String | Search keywords | -
79+
80+
81+
## Events
82+
Property | Type | Description | Params
83+
-- | -- | -- | --
84+
on-selected-change |function | <div style="width: 150pt">Callback function for when the user right clicks a treeNode</div> | function(node)
85+
on-drop | function | Callback function for when the user drag node | function({ parentNode, targetNode, callback })
86+
on-checked-item | function | Callback function for when the user check node | function({ node, vNode })
87+
on-checked-change | function | Callback function for when checkbox change |function({ node, selectedData })
88+
89+
Scoped Slot
90+
91+
name | Description
92+
-- | --
93+
loading | customize loading component, params`({loading})`
94+
check | customize check component, params`({handleClickCheckBox, selectToggle, node})`
95+
expandIcon | customize expand icon and unexpanded icon, params`({ expanded, toggleFold })`
96+
97+
## Contributions
98+
99+
Welcome to improve this component with any issue, pull request or code review.
100+
## License
101+
[MIT License](https://github.com/Create-Peace/vue-tree/blob/master/LICENSE).

‎docs/css/app.1a4ddc1e.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
File renamed without changes.

‎docs/index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>docs-example</title><link rel="stylesheet" href="milligram.css"><link rel="stylesheet" href="highlight/theme.css"><script src="highlight/pack.js"></script><style>.ml20 {
2+
margin-left: 20px;
3+
}</style><link href="css/app.1a4ddc1e.css" rel="preload" as="style"><link href="js/app.b6e66295.js" rel="preload" as="script"><link href="js/chunk-vendors.5d00ae1b.js" rel="preload" as="script"><link href="css/app.1a4ddc1e.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but docs-example doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.5d00ae1b.js"></script><script src="js/app.b6e66295.js"></script></body></html>

‎docs/js/app.b6e66295.js

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/js/chunk-vendors.5d00ae1b.js

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /