diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md index 5030cea26..6e48f3551 100644 --- a/examples/docs/en-US/tree.md +++ b/examples/docs/en-US/tree.md @@ -1042,6 +1042,11 @@ Only one node among the same level can be expanded at one time. | getCurrentNode | return the highlight node (null if no node is highlighted) | — | | setCurrentKey | set highlighted node by key, only works when `node-key` is assigned | (key) the node's key to be highlighted | | 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 delete | +| append | append a child node for a node in tree | (data, parentNode) Accept two parameters: 1. child node's data 2. parent node's data, key or node | +| insertBefore | insert a node before a node in tree | (data, refNode) (data, parentNode) Accept two parameters: 1. sibling node's data 2. reference node's data, key or node | +| insertAfter | insert a node after a node in tree | (data, refNode) 1. sibling node's data 2. reference node's data, key or node | ### Events | Event Name | Description | Parameters | diff --git a/examples/docs/es/tree.md b/examples/docs/es/tree.md index 0d24beee8..0324ef81e 100644 --- a/examples/docs/es/tree.md +++ b/examples/docs/es/tree.md @@ -1040,6 +1040,11 @@ Solo puede ser expandido un nodo del mismo nivel a la vez. | getCurrentNode | devuelve el nodo resaltado (null si no hay ninguno) | — | | setCurrentKey | establece el nodo resaltado por la clave, solo funciona si `node-key` está asignado | (key) la clave del nodo a ser resaltado | | setCurrentNode | establece el nodo resaltado, solo funciona si `node-key` está asignado | (node) nodo a ser resaltado | +| 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 delete | +| append | append a child node for a node in tree | (data, parentNode) Accept two parameters: 1. child node's data 2. parent node's data, key or node | +| insertBefore | insert a node before a node in tree | (data, refNode) (data, parentNode) Accept two parameters: 1. sibling node's data 2. reference node's data, key or node | +| insertAfter | insert a node after a node in tree | (data, refNode) 1. sibling node's data 2. reference node's data, key or node | ### Eventos | Nombre del evento | Descripción | Parámetros | diff --git a/examples/docs/zh-CN/tree.md b/examples/docs/zh-CN/tree.md index 57dedbe72..3ba410d1e 100644 --- a/examples/docs/zh-CN/tree.md +++ b/examples/docs/zh-CN/tree.md @@ -1027,7 +1027,9 @@ | isLeaf | 指定节点是否为叶子节点 | boolean, function(data, node) | — | — | ### 方法 -`Tree` 拥有如下方法，返回目前被选中的节点数组： +`Tree` 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。 +`Tree` 拥有如下方法： + | 方法名 | 说明 | 参数 | | --------------- | ---------------------------------------- | ---------------------------------------- | | filter | 对树节点进行筛选操作 | 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数 | @@ -1041,6 +1043,11 @@ | getCurrentNode | 获取当前被选中节点的 node，若没有节点被选中则返回 null | — | | setCurrentKey | 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (key) 待被选节点的 key | | setCurrentNode | 通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (node) 待被选节点的 node | +| getNode | 根据 data 或者 key 拿到 Tree 组件中的 node | (data) 要获得 node 的 key 或者 data | +| remove | 删除 Tree 中的一个节点 | (data) 要删除的节点的 data、key 或者 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 | ### Events | 事件名称 | 说明 | 回调参数 | diff --git a/packages/tree/src/model/node.js b/packages/tree/src/model/node.js index c970b88ea..13023a04e 100644 --- a/packages/tree/src/model/node.js +++ b/packages/tree/src/model/node.js @@ -168,10 +168,20 @@ export default class Node { return getPropertyFromData(this, 'disabled'); } - insertChild(child, index) { + insertChild(child, index, batch) { if (!child) throw new Error('insertChild error: child is required.'); if (!(child instanceof Node)) { + if (!batch) { + const children = this.getChildren() || []; + if (children.indexOf(child.data) === -1) { + if (typeof index === 'undefined' || index < 0) { + children.push(child.data); + } else { + children.splice(index, 0, child.data); + } + } + } objectAssign(child, { parent: this, store: this.store @@ -208,6 +218,12 @@ export default class Node { } removeChild(child) { + const children = this.getChildren() || []; + const dataIndex = children.indexOf(child.data); + if (dataIndex > -1) { + children.splice(dataIndex, 1); + } + const index = this.childNodes.indexOf(child); if (index > -1) { @@ -263,7 +279,7 @@ export default class Node { doCreateChildren(array, defaultProps = {}) { array.forEach((item) => { - this.insertChild(objectAssign({ data: item }, defaultProps)); + this.insertChild(objectAssign({ data: item }, defaultProps), undefined, true); }); } @@ -342,6 +358,7 @@ export default class Node { } getChildren() { // this is data + if (this.level === 0) return this.data; const data = this.data; if (!data) return null; diff --git a/packages/tree/src/model/tree-store.js b/packages/tree/src/model/tree-store.js index efc08e88b..5019850b1 100644 --- a/packages/tree/src/model/tree-store.js +++ b/packages/tree/src/model/tree-store.js @@ -64,15 +64,18 @@ export default class TreeStore { setData(newVal) { const instanceChanged = newVal !== this.root.data; - this.root.setData(newVal); if (instanceChanged) { + this.root.setData(newVal); this._initDefaultCheckedNodes(); + } else { + this.root.updateChildren(); } } getNode(data) { + if (data instanceof Node) return data; const key = typeof data !== 'object' ? data : getNodeKey(this.key, data); - return this.nodesMap[key]; + return this.nodesMap[key] || null; } insertBefore(data, refData) { diff --git a/packages/tree/src/tree-node.vue b/packages/tree/src/tree-node.vue index 602058130..74e4a2472 100644 --- a/packages/tree/src/tree-node.vue +++ b/packages/tree/src/tree-node.vue @@ -64,6 +64,7 @@ import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition'; import ElCheckbox from 'element-ui/packages/checkbox'; import emitter from 'element-ui/src/mixins/emitter'; + import { getNodeKey } from './model/util'; export default { name: 'ElTreeNode', @@ -140,12 +141,8 @@ }, methods: { - getNodeKey(node, index) { - const nodeKey = this.tree.nodeKey; - if (nodeKey && node) { - return node.data[nodeKey]; - } - return index; + getNodeKey(node) { + return getNodeKey(this.tree.nodeKey, node.data); }, handleSelectChange(checked, indeterminate) { diff --git a/packages/tree/src/tree.vue b/packages/tree/src/tree.vue index b32fc8b36..9def50723 100644 --- a/packages/tree/src/tree.vue +++ b/packages/tree/src/tree.vue @@ -21,6 +21,7 @@