mirror of https://github.com/ElemeFE/element
Tree: add current-change event & current-node-key. (#1807)
parent
4614990cb4
commit
6c4f8a6867
|
@ -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 |
|
||||
|
||||
|
|
|
@ -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 对象 |
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue