github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Tree: register node after dragging (#12279) 

* Tree: register node after dragging

* update Tree docs
pull/12299/head
hetech 2018-08-08 18:07:16 +08:00 committed by Jikkai Xiao
parent 9e738a85c3
commit 3da485b617
5 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/docs/en-US/tree.md
View File

@ -1215,7 +1215,7 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
| setCurrentKey | set highlighted node by key, only works when `node-key` is assigned | (key) the node's key to be highlighted. If `null`, cancel the currently highlighted node |
| setCurrentNode | set highlighted node, only works when `node-key` is assigned | (node) the node to be highlighted |
| getNode | get node by data or key | (data) the node's data or key |
| remove | remove a node | (data) the node's data or node to be deleted |
| remove | remove a node, only works when node-key is assigned | (data) the node's data or node to be deleted |
| append | append a child node to a given node in the tree | (data, parentNode) 1. child node's data to be appended 2. parent node's data, key or node |
| insertBefore | insert a node before a given node in the tree | (data, refNode) 1. node's data to be inserted 2. reference node's data, key or node |
| insertAfter | insert a node after a given node in the tree | (data, refNode) 1. node's data to be inserted 2. reference node's data, key or node |

2
examples/docs/es/tree.md
View File

@ -1213,7 +1213,7 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
| setCurrentKey | establece el nodo resaltado por la clave, solo funciona si `node-key` está asignado | (key) la clave del nodo a ser resaltado. If `null`, cancel the currently highlighted node |
| setCurrentNode | establece el nodo resaltado, solo funciona si `node-key` está asignado | (node) nodo a ser resaltado |
| getNode | devuelve el nodo por el dato o la clave | (data) los datos o clave del nodo |
| remove | elimina un nodo | (data) los datos del nodo o nodo a borrar |
| remove | elimina un nodo, solo funciona si `node-key` está asignado | (data) los datos del nodo o nodo a borrar |
| append | añadir un nodo hijo a un nodo determinado del árbol | (data, parentNode) 1. los datos del nodo hijo que se añadirán 2. los datos del nodo padre, clave o nodo |
| insertBefore | insertar un nodo antes de un nodo dado en el árbol | (data, refNode) 1. Datos del nodo que se insertarán 2. Datos del nodo de referencia, clave o nodo |
| insertAfter | insertar un nodo después de un nodo dado en el árbol | (data, refNode) 1. Datos del nodo que se insertarán 2. Datos del nodo de referencia, clave o nodo |

2
examples/docs/zh-CN/tree.md
View File

@ -1236,7 +1236,7 @@
| setCurrentKey | 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (key) 待被选节点的 key，若为 null 则取消当前高亮的节点 |
| setCurrentNode | 通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (node) 待被选节点的 node |
| getNode | 根据 data 或者 key 拿到 Tree 组件中的 node | (data) 要获得 node 的 key 或者 data |
| remove | 删除 Tree 中的一个节点 | (data) 要删除的节点的 data、key 或者 node |
| remove | 删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性 | (data) 要删除的节点的 data 或者 node |
| append | 为 Tree 中的一个节点追加一个子节点 | (data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node |
| insertBefore | 为 Tree 的一个节点的前面增加一个节点 | (data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node |
| insertAfter | 为 Tree 的一个节点的后面增加一个节点 | (data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node |

8
packages/tree/src/model/tree-store.js
View File

@ -91,7 +91,7 @@ export default class TreeStore {
remove(data) {
const node = this.getNode(data);
if (node) {
if (node && node.parent) {
node.parent.removeChild(node);
}
}
@ -144,11 +144,9 @@ export default class TreeStore {
const key = this.key;
if (!key || !node || !node.data) return;
const childNodes = node.childNodes;
for (let i = 0, j = childNodes.length; i < j; i++) {
const child = childNodes[i];
node.childNodes.forEach(child => {
this.deregisterNode(child);
}
});
delete this.nodesMap[node.key];
}

22
packages/tree/src/tree.vue
View File

@ -447,17 +447,21 @@
event.dataTransfer.dropEffect = 'move';
if (draggingNode && dropNode) {
const data = draggingNode.node.data;
if (dropType === 'before') {
draggingNode.node.remove();
dropNode.node.parent.insertBefore({ data }, dropNode.node);
} else if (dropType === 'after') {
draggingNode.node.remove();
dropNode.node.parent.insertAfter({ data }, dropNode.node);
} else if (dropType === 'inner') {
dropNode.node.insertChild({ data });
const draggingNodeCopy = { data: draggingNode.node.data };
if (dropType !== 'none') {
draggingNode.node.remove();
}
if (dropType === 'before') {
dropNode.node.parent.insertBefore(draggingNodeCopy, dropNode.node);
} else if (dropType === 'after') {
dropNode.node.parent.insertAfter(draggingNodeCopy, dropNode.node);
} else if (dropType === 'inner') {
dropNode.node.insertChild(draggingNodeCopy);
}
if (dropType !== 'none') {
this.store.registerNode(draggingNodeCopy);
}
removeClass(dropNode.$el, 'is-drop-inner');
this.$emit('node-drag-end', draggingNode.node, dropNode.node, dropType, event);