diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md index 3950c11bf..b9180a884 100644 --- a/examples/docs/en-US/tree.md +++ b/examples/docs/en-US/tree.md @@ -224,6 +224,7 @@ Used for node selection. In the following example, data for each layer is acquir | load | method for loading subtree data | function(node, resolve) | — | — | | render-content | render function for tree node | Function(h, { node } | - | - | | highlight-current | whether current node is highlighted | boolean | - | false | +| current-node-key | key of current node, a set only prop | string, number | - | - | | default-expand-all | whether to expand all nodes by default | boolean | - | false | | auto-expand-parent | whether to expand father node when a child node is expanded | boolean | — | true | | default-expanded-keys | array of keys of initially expanded nodes | array | — | — | @@ -254,5 +255,5 @@ Used for node selection. In the following example, data for each layer is acquir |---------- |-------- |---------- | | node-click | triggers when a node is clicked | three parameters: node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself | | check-change | triggers when the selected state of the node changes | three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes | - +| current-change | triggers when current node changes | two parameters: node object corresponding to the current node, `node` property of TreeNode | diff --git a/examples/docs/zh-CN/tree.md b/examples/docs/zh-CN/tree.md index 62422d137..44254bb71 100644 --- a/examples/docs/zh-CN/tree.md +++ b/examples/docs/zh-CN/tree.md @@ -236,6 +236,7 @@ | load | 加载子树数据的方法 | function(node, resolve) | — | — | | render-content | 树节点的内容区的渲染 Function | Function(h, { node } | - | - | | highlight-current | 是否高亮当前选中节点,默认值是 false。| boolean | - | false | +| current-node-key | 当前选中节点的 key,是一个只写属性 | string, number | - | - | | default-expand-all | 是否默认展开所有节点 | boolean | - | false | | auto-expand-parent | 展开子节点的时候是否自动展开父节点 | boolean | — | true | | default-expanded-keys | 默认展开的节点的 key 的数组 | array | — | — | @@ -266,3 +267,4 @@ |---------- |-------- |---------- | | node-click | 节点被点击时的回调 | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 | | check-change | 节点选中状态发生变化时的回调 | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 | +| current-change | 当前选中节点变化时触发的事件 | 共两个参数,依次为:当前节点的数据,当前节点的 Node 对象 | diff --git a/packages/tree/src/model/node.js b/packages/tree/src/model/node.js index b9c5848d0..161e986cd 100644 --- a/packages/tree/src/model/node.js +++ b/packages/tree/src/model/node.js @@ -100,6 +100,10 @@ export default class Node { this.expand(null, store.autoExpandParent); } + if (key && store.currentNodeKey && this.key === store.currentNodeKey) { + store.currentNode = this; + } + if (store.lazy) { store._initDefaultCheckedNode(this); } diff --git a/packages/tree/src/model/tree-store.js b/packages/tree/src/model/tree-store.js index 0516df501..50410ec7e 100644 --- a/packages/tree/src/model/tree-store.js +++ b/packages/tree/src/model/tree-store.js @@ -3,6 +3,9 @@ import { getNodeKey } from './util'; export default class TreeStore { constructor(options) { + this.currentNode = null; + this.currentNodeKey = null; + for (let option in options) { if (options.hasOwnProperty(option)) { this[option] = options[option]; @@ -233,4 +236,19 @@ export default class TreeStore { node.setChecked(!!checked, deep); } } + + getCurrentNode() { + return this.currentNode; + } + + setCurrentNode(node) { + this.currentNode = node; + } + + setCurrentNodeKey(key) { + const node = this.getNode(key); + if (node) { + this.currentNode = node; + } + } }; diff --git a/packages/tree/src/tree-node.vue b/packages/tree/src/tree-node.vue index 5f6c741d6..45e6c2160 100644 --- a/packages/tree/src/tree-node.vue +++ b/packages/tree/src/tree-node.vue @@ -2,7 +2,11 @@ <div class="el-tree-node" @click.stop="handleClick" v-show="node.visible" - :class="{ 'is-expanded': childNodeRendered && expanded, 'is-current': tree.currentNode === _self, 'is-hidden': !node.visible }"> + :class="{ + 'is-expanded': childNodeRendered && expanded, + 'is-current': tree.store.currentNode === node, + 'is-hidden': !node.visible + }"> <div class="el-tree-node__content" :style="{ 'padding-left': (node.level - 1) * 16 + 'px' }" @click="handleExpandIconClick"> @@ -124,7 +128,9 @@ }, handleClick() { - this.tree.currentNode = this; + const store = this.tree.store; + store.setCurrentNode(this.node); + this.tree.$emit('current-change', store.currentNode ? store.currentNode.data : null, store.currentNode); }, handleExpandIconClick(event) { diff --git a/packages/tree/src/tree.vue b/packages/tree/src/tree.vue index cc5b5ab37..a82a33e0e 100644 --- a/packages/tree/src/tree.vue +++ b/packages/tree/src/tree.vue @@ -58,6 +58,7 @@ default: false }, highlightCurrent: Boolean, + currentNodeKey: [String, Number], load: Function, filterNodeMethod: Function }, @@ -71,6 +72,7 @@ lazy: this.lazy, props: this.props, load: this.load, + currentNodeKey: this.currentNodeKey, checkStrictly: this.checkStrictly, defaultCheckedKeys: this.defaultCheckedKeys, defaultExpandedKeys: this.defaultExpandedKeys, @@ -114,6 +116,9 @@ this.store.defaultExpandedKeys = newVal; this.store.setDefaultExpandedKeys(newVal); }, + currentNodeKey(newVal) { + this.store.setCurrentNodeKey(newVal); + }, data(newVal) { this.store.setData(newVal); } diff --git a/test/unit/specs/tree.spec.js b/test/unit/specs/tree.spec.js index 79e0b6c04..6374b6ab0 100644 --- a/test/unit/specs/tree.spec.js +++ b/test/unit/specs/tree.spec.js @@ -94,6 +94,20 @@ describe('Tree', () => { }, DELAY); }); + it('current change', done => { + vm = getTreeVm(':props="defaultProps" @current-change="handleCurrentChange"', { + methods: { + handleCurrentChange(data) { + this.currentNode = data; + } + } + }); + const firstNode = vm.$el.querySelector('.el-tree-node__content'); + firstNode.click(); + expect(vm.currentNode.label).to.equal('一级 1'); + done(); + }); + it('emptyText', (done) => { vm = getTreeVm(':props="defaultProps"'); vm.data = []; @@ -113,6 +127,16 @@ describe('Tree', () => { }); }); + it('current-node-key', done => { + vm = getTreeVm(':props="defaultProps" :current-node-key="1"'); + const firstNode = document.querySelector('.el-tree-node'); + firstNode.click(); + vm.$nextTick(() => { + expect(firstNode.classList.contains('is-current')).to.true; + done(); + }); + }); + it('defaultExpandAll', () => { vm = getTreeVm(':props="defaultProps" default-expand-all'); expect(vm.$el.querySelectorAll('.el-tree-node.is-expanded').length).to.equal(ALL_NODE_COUNT);