This project is no longer maintained, please move to the new monorepo he-tree.
本项目不再维护, 请移步到新的 monorepo he-tree.
A draggable sortable vue tree component, with dragging placeholder, types definition. Vue3 supported. Demo, Document
A draggable sortable vue tree component, with dragging placeholder, types definition.
Home Page: https://hetree.phphe.com/
Hi guys! Thx your this lib.
We're dealing with this kind of error in our codebase.
I was trying to import also this way. It does not work neither.
import * as tree from "he-tree-vue";
We end up with this one.
// @ts-ignore
import {walkTreeData} from "he-tree-vue/dist/he-tree-vue";
Can you please help me? Thx.
Any plans on supporting vue.js 3 and composition-api?
Hi,
first of all, thanks for this nice component!
I'm wondering if I can update tree node data directly without having to reload the entire tree.
For example change the title of a node in a given path, after receiving data from an http request.
Is this possible with any of the available api methods? I've been trying for a while now, but without any success.
從 chrome console 裡看到是這行引起的
TypeError: Cannot read property 'map' of undefined
he-tree-vue/src/components/Tree.vue
Line 52 in 0f9078b
nodes
是一個 undefined
值導致
但神奇的是我只要修改一下 該 treeView component
透過 Webpack hot reload 的機制
拖曳功能就又恢複正常了
Are there typescript definitions available for your component?
Looks really good what you did, but I would not use it in a new project without correct types...
Hi,
I'm trying to have a tree in which all the nodes have to be hanging from a single root node.
You can see the data below, in the id 1 I set draggable to false, so can't be modify, but I still can drop a node in the same level that this node, there is any way to disable this?
{ treeData: [ { id: 1, text: "root", isRoot: true, $draggable: false, children: [ { id: 2, text: "node 2", isRoot: false, $draggable: true, $droppable: true, }, { id: 3, text: "node 2-1", isRoot: false, $draggable: true, $droppable: true, }, { id: 4, text: "node 2-2", isRoot: false, $draggable: true, $droppable: true, }, ], }, ], };
Hi!
I'm using a similar implementation of he-tree-vue
as shown here:
https://he-tree-vue.phphe.com/guide.html#custom-display-through-default-slot
The example above breaks when adding it to a Vue 3 project since slot-scope
is no longer available.
https://vuejs.org/v2/guide/components-slots.html#Deprecated-Syntax
I want to migrate my code to Vue 3, but I'm unsure how to refactor slot-scope
with he-tree-vue
. Could you update the documentation to reflect this change?
Thanks!
– Andreas
Hi,
My team and I are using he-tree-vue in a few of our projects, also in combination with the pro version.
We noticed router-links, click events (also tags) are not triggered on touch devices.
This is only when using the Draggable plugin imported using the mixPlugins
method.
You can even reproduce it in the demo's from the guide: https://he-tree-vue.phphe.com/guide.html#customize
You can test this yourself by either opening it on an actual touch device or toggling on the device toolbar in the Chrome Devtools. You'll notice links and click events are not triggered.
We would appreciate it if you can take a look at this!
Hi phphe,
thanks for your great tree library, i bought the pro version.
my question is:
is the he tree able to recognize if i drop a node (from another tree) directly onto a node in the other tree ?
if yes, how can that be done ?
Thanks in advance
Adrian
Hey @phphe you have done a nice job. It's a much needed library. Thanks for this wonderful work.
I want to implement this library inside a tbody
tag.
i.e.
table
tbody
treeview
tr
td
td
I have used the overrideSlotDefault
method to override the default slot
, but CSS is not applied to td
tags.
i.e. it looks like the last td is not drawn.
It look like All the contents are filled inside the first td
.
i.e.
ID | Name | Action |
---|---|---|
1 Abcd Action Button | ||
2 Mnop Edit Link | ||
3 Pqrs Edit Link |
So, is it possible to write a tree inside table
using your library ?
Hello guys
Do you have any sample where I can find how work with 'walkTreeData'.
Because, In my case I have a tree who can contain X nodes, and every nodes have a property which is based on a modulo % 2.
I was thinking about working with walkTreeData but I wasn't able to call this function properly.
Do you have any suggestion or workaround to walk across the tree properly?
Thank's in advance, if you need some helps to improve the plugin let me know
Hi Xinxin,
My team and I tried contacting you through email about the purchase of he-tree-vue pro. We still have not received any information where we can get the package we purchased.
I'm sorry for reaching out to you this way, but we've sent numerous request to you. This has been 3 weeks already, and I still haven't received an answer. I see that you're active on Github, so please also reply to us.
Best regards,
Adding a Tree
with v-slot
results in multiple foldingTransition
warnings. Is this the correct way to customize how the tree is displayed with Vue 3?
https://he-tree-vue.phphe.com/guide.html#custom-display-through-default-slot
Here's a minimal implementation of the problem, adding the Tree
to a HelloWorld
component built with the Vue Cli:
<template>
<Tree :value="treeData" v-slot="{ node, index, path, tree }">
<span>
<b>{{ index }}</b>
Title: {{ node.title }} - path: <i>{{ path.join(",") }}</i>
</span>
</Tree>
...
</template>
<script>
import { Tree } from "he-tree-vue";
export default {
...
components: { Tree },
data() {
return {
treeData: [
{ title: "node 1" },
{ title: "node 2", children: [{ title: "node 2-1" }] },
],
};
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
...
</style>
I want to use vuex together with he-tree-vue.
We are now experiencing lots of vuex errors:
[vuex] do not mutate vuex store state outside mutation.
You made a function cloneTreeData for this purpose. However, you do not provide any examples as far as I know how to use it.
Can you show a example?
Nice component mate, well done! Could you think about adding examples/demo of $xxxClass and $xxxStyle .... darned if I can get either of them to work. Cheers
I have a use case of changing a node style when certain position requirements are met, e.g. when hovering to a node, it will insert it as a child node, and while hovering below / above would insert it as an adjacent node, I need to detect this distinction to be able to change the styling.
By adding hooks, preferably on the placeholder position changes (e.g when a node is about to be added as a child node, I want to make the target parent node to have a different class).
I can create a pull request for the changes if required.
We can put child in children property
Can i change the property name of "children"?
like "children" to "content" or something
Hi,
How can I update values in parent_id and path after drag and drop event is completed?
So for example I have the below structure:
As you can see the 3rd element with id of 363 has wrong parentId of 54 (should be 55) and path should be 1 instead of 2 as it is a first element in that array.
Any idea how can I update those values dynamically so I can then save them back into mysql?
Many thanks for your help!
When set ondragstart and ondragerror props, receive error
[ERROR|/usr/local] {"text":"http://localhost:8080/_nuxt/2.js:5036_Uncaught TypeError: Cannot read property 'slice' of undefined_52_TypeError: Cannot read property 'slice' of undefined","level":"ERROR"}
Uncaught TypeError: Cannot read property 'slice' of undefined
at VueComponent.executeHook (2.js:5036)
at Object.ondrag (2.js:1497)
at Object.drag (2.js:662)
at drag (2.js:1952)
at HTMLDocument.moving (2.js:2006)
at HTMLDocument.wrapper (2.js:1736)
eachDraggable and eachDroppable work fine, but i need to test when drag end, because i dont put "folder" inside another, only "files"
version: 2.0.5
Awesome project, thank you!
A question. Is a click event available for the node? I mean, if I want to do some actions on click on top of the node what should I do?
Hi.
Your lib looks really nice at doing a complete tree feature in Vue.js. There are not so many of these libraries (often they aren't maintained anymore). But the usage of such complex component is often made in sophisticated pro app (this is my case). And I am reluctant to migrate to your lib, if I couldn't get a little bit of sense of your releases.
When I see versions 2.0.6, 2.0.7-beta1,2,3, 2.0.7 and 3.0.0 the same day, it doesn't feel like a stable thing I should adopt... Could you at least say a word about each (important) release? That would certainly help the adoption of it. Thanks in advance.
Hey bro,
Instead of adding an item to the end of the list, is it possible to add it to a specific position (path)?
I need to have an add button on each item (node), and when click to add a new node right after it.
Thank you,
Vladimir
When dragging a node and the node top left corner went outside the tree area, drag and drop would stop working and the placeholder would not be moved.
I can help with a PR if needed.
First of all, thank you for your great work...!
In your demo source https://he-tree-vue.phphe.com/source.html#demo6 ...
There is a part as below.
return <div class="node-content">
<button class="mrs drag-trigger">Drag</button>
<button class="mrs fold-btn" onClick={() => tree.toggleFold(node, path)}>{node.$folded ? '+' : '-'}</button>
{original()}
<button class="mls">edit</button>
<button class="mls" onClick={() => this.removeNodeByPath(path)}>remove</button>
<button class="mls" onClick={() => this.hideNode(node)}>hidden</button>
</div>
I think this must because of my short knowledge of Vue.js, but it makes an error as below.
Can I ask how the demo source is possible to be run...?
Do I need to install another NPM for the JS grammar...?
I have problem to config the tree with one children and not to have subchildren
我希望在移动端上能支持默认滚动屏幕,然后长按元素后开启拖拽~
Good afternoon.
Is it possible now to replace the name of the nested array "children" with any other?
Thanks for the great plugin.
Hi,
I am working with a Draggable plugin.
How can I access the parent of the dragged node?
I see getNodeParentByPath
method, but how do I call it?
<template>
<Tree
:value="categoryTreeData"
draggable
droppable @drop="handleTreeChange"
>
<span slot-scope="{node, index, path, tree}">
<template v-if="!node.isDragPlaceHolder">
<span
v-if="node.children && node.children.length"
@click="slot.store.toggleOpen(node)"
>
<v-icon v-if="node.open" small class="mr-1">mdi-minus-box-outline</v-icon>
<v-icon v-if="!node.open" small class="mr-1">mdi-plus-box-outline</v-icon>
</span>
<span :class="{ 'draggable-node--drop-disabled': node.droppable === false }">{{ node.text }}</span>
</template>
</span>
</Tree>
</template>
<script>
import { Tree, Draggable } from "he-tree-vue"
import 'he-tree-vue/dist/he-tree-vue.css'
import sortBy from 'lodash/sortBy'
export default {
name: 'CategoryTreeSort',
components: {Tree: Tree.mixPlugins([Draggable])},
methods: {
async handleTreeChange (store) {
const {dragNode} = store
// how to get the parent of dragNode?
}
....
Thank you
if i add transition time to tree-branch like this
.tree-branch {
transition: all 20s ease;
}
it moves really weird not smooth
tthis feature make tree more beatiful!
Hello,
Is it possible to add RTL support?
So the elements would have padding-right instead of padding-left?
I messed around with it a little and managed to get it to look right, but my changes broke the horizontal dragging functionality to change the nesting level.
Thanks.
Hello,
'he-tree-vue' is production ready or you need some helps ?
I have a tree limited to a 2 levels whit this code
const self = this
this.treeDatas = cloneTreeData(this.$store.state.project.features)
walkTreeData(this.treeDatas, function (node, index, parent, path) {
if (path && path.length >= 2) {
self.$set(node, '$droppable', false)
}
})
But i want to limit that if the node [0] has children [0,1] cant be dropped if the result generates a 3 levels list
Any ideas?
just evaluating this library and looks promising, thanks a lot!
Although something I've encountered: My tree is within a sidebar component (fixed, own scroll). So having a long tree I need scrolling. Enabling edgeScroll
though scrolls down the whole document (therefore the main component) instead of my sidebar only. Is there a way to specify which container should be scrolled?
Hello,
Does the tree has a Delay API for this prop?
In Webcat.app we are coming from vue-draggable-nested-tree
Thank you!
Hi
I'm using v2.0.8 with the plugins Fold, Check, Draggable as in your Demo
When an elment is dragged downwards after dropping it will be inserted at index (placeholderIndex - 1)
instead of (placeholderIndex)
. Dragging an element upwards works as expected.
Any ideas what's going wrong here?
Thanks
dsheyp
I'm trying to walk the tree and update nodes.
I tried using code I found for earlier versions, but it doesn't seem to work anymore with Vue 3 / he-tree-vue 3.0.0.
Trying to use this.$set() results in this error:
TypeError: _this2.$set is not a function
at eval (ModelTreeView.vue?98ec:35)
at func (helper-js.esm.js?0fa5:889)
at depthFirstSearch (helper-js.esm.js?0fa5:907)
at TreeData.walk (helper-js.esm.js?0fa5:1145)
at walkTreeData (he-tree-vue.esm.js?94dd:20)
at Proxy.walkTreeData$1 (he-tree-vue.esm.js?94dd:193)
at Proxy.showHidden (ModelTreeView.vue?98ec:34)
at eval (Model.vue?1751:225)
I prepared a sandbox to reproduce the issue. Please click "Hide" or "Show hidden" to trigger it:
https://codesandbox.io/s/vue-cli-and-he-tree-vue-example-forked-xv1ww?file=/src/components/TreeView.vue
How can I walk through all the nodes of the tree and update their attributes?
Thank you for your help and this amazing component!
Is these features are in repository's plan or already possible?
I tried to use fold plugin props foldAllAfterMounted
in this example but it didn't work.
<template>
<Tree :value="treeData" :foldAllAfterMounted="false">
<span slot-scope="{node, index, path, tree}">
<b @click="tree.toggleFold(node, path)">
{{node.$folded ? '+' : '-'}}
</b>
{{node.text}}
</span>
</Tree>
</template>
<script>
import 'he-tree-vue/dist/he-tree-vue.css'
import {Tree, Fold} from 'he-tree-vue'
export default {
components: {Tree: Tree.mixPlugins([Fold])},
data() {
return {
treeData: [{text: 'node 1'}, {text: 'node 2', children: [{text: 'node 2-1'}]}]
}
},
}
</script>
Is there a way to disable auto checking sub-menus by checking parent? and of course vice versa
Edit: I want to disable the above behavior also for deleting nodes. Prevent deleting childs as well.
Edit: Another question :) How to have multiple Trees while only some of them are draggable? loading Draggable components makes them all draggable.
Hello! Great project!
But could you provide little bit more complex example with undraggable and undroppable single nodes. Something like this example for vue-draggable-nested-tree (https://codepen.io/phphe/pen/KRapQm)? Or some example of functions for droppable / draggable.
Actually, I need to make undroppable thoes nodes that have no children. Is it easy to implement?
This is a spectacular tree implementation I must say, so thank you for providing it!
Now, I have the following use case - I need to be able to drag elements INTO the tree and the source should not be another tree. The source (from where I want to drag elements from) is a grid or an arbitrary collection of elements (might also be a vertical/horizontal list but not necessary). Also, it should be possible to clone the element when dragging it into the tree.
Would that be possible with he-tree-vue? How do I implement an arbitrary collection of elements that can be draggable into the tree?
I am following the getting started guide posted here: https://he-tree-vue.phphe.com/guide.html#installation
However while trying to experiment with the most basic example I get this warning:
"export 'default' (imported as 'Tree') was not found in 'he-tree-vue'
Background:
I installed the package by using "npm i -P he-tree-vue" and then got a warning for PeerDependencies so i installed vue property decorator by "npm install --save-dev vue-property-decorator@^8.5.1".
I make it finally checking nodes with ondragend
Hello, I'm trying to make a drag and drop tree where nodes can only be moved inside same level, to do this I used function droppable and I'm using the 2nd store parameter. startPath works fine but targetPath is being set late and is undefined, how can I work around this?
methods: {
isNodeDroppable(tree, store) {
console.log(store);
console.log(store.startPath + "-" + store.targetPath);
return true;
},
},
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.