diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md index 7fded6746..ca56ec471 100644 --- a/examples/docs/en-US/tree.md +++ b/examples/docs/en-US/tree.md @@ -22,22 +22,22 @@ display: flex; margin: -24px; } - + .block { flex: 1; padding: 8px 24px 24px; - + &:first-child { border-right: solid 1px #eff2f6; } - + > p { text-align: center; margin: 0; line-height: 4; } } - + .custom-tree-node { flex: 1; display: flex; @@ -150,7 +150,7 @@ }] }] }]; - + const data6 = [{ label: 'Level one 1', children: [{ @@ -1181,6 +1181,7 @@ You can drag and drop Tree nodes by adding a `draggable` attribute. | show-checkbox | whether node is selectable | boolean | — | false | | check-strictly | whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true` | boolean | — | false | | default-checked-keys | array of keys of initially checked nodes | array | — | — | +| current-node-key | key of initially selected node | string, number | — | — | | filter-node-method | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | — | — | | accordion | whether only one node among the same level can be expanded at one time | boolean | — | false | | indent | horizontal indentation of nodes in adjacent levels in pixels | number | — | 16 | diff --git a/examples/docs/es/tree.md b/examples/docs/es/tree.md index ded4534ba..e62ff55f2 100644 --- a/examples/docs/es/tree.md +++ b/examples/docs/es/tree.md @@ -4,40 +4,40 @@ width: 20px; background: #ddd; } - + .folder { width: 20px; background: #888; } - + .buttons { margin-top: 20px; } - + .filter-tree { margin-top: 20px; } - + .custom-tree-container { display: flex; margin: -24px; } - + .block { flex: 1; padding: 8px 24px 24px; - + &:first-child { border-right: solid 1px #eff2f6; } - + > p { text-align: center; margin: 0; line-height: 4; } } - + .custom-tree-node { flex: 1; display: flex; @@ -219,7 +219,7 @@ this.$refs.tree2.filter(val); } }, - + methods: { handleCheckChange(data, checked, indeterminate) { console.log(data, checked, indeterminate); @@ -268,7 +268,7 @@ } else { hasChild = Math.random() > 0.5; } - + setTimeout(function() { let data; if (hasChild) { @@ -280,7 +280,7 @@ } else { data = []; } - + resolve(data); }, 500); }, @@ -289,7 +289,7 @@ return resolve([{ name: 'region' }]); } if (node.level > 1) return resolve([]); - + setTimeout(() => { const data = [{ name: 'leaf', @@ -297,7 +297,7 @@ }, { name: 'zone' }]; - + resolve(data); }, 500); }, @@ -332,14 +332,14 @@ } data.children.push(newChild); }, - + remove(node, data) { const parent = node.parent; const children = parent.data.children || parent.data; const index = children.findIndex(d => d.id === data.id); children.splice(index, 1); }, - + renderContent(h, { node, data, store }) { return ( @@ -350,13 +350,13 @@ ); }, - + filterNode(value, data) { if (!value) return true; return data.label.indexOf(value) !== -1; } }, - + data() { return { data, @@ -1181,6 +1181,7 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` . | show-checkbox | Si un nodo es seleccionable | boolean | — | false | | check-strictly | El estado de seleccion de un nodo no afecta a sus padres o hijos, cuando `show-checkbox` es `true` | boolean | — | false | | default-checked-keys | Array con claves de los nodos seleccionados inicialmente | array | — | — | +| current-node-key | key of initially selected node | string, number | — | — | | filter-node-method | Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve `false` el nodo se oculta | Function(value, data, node) | — | — | | accordion | Si solo un nodo de cada nivel puede expandirse a la vez | boolean | — | false | | indent | Indentación horizontal de los nodos en niveles adyacentes, en pixeles | number | — | 16 | @@ -1240,4 +1241,4 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` . ### Scoped Slot | Name | Description | |------|--------| -| — | Contenido personalizado para nodos de tree. El parámetro del scope es { node, data }. | \ No newline at end of file +| — | Contenido personalizado para nodos de tree. El parámetro del scope es { node, data }. | diff --git a/examples/docs/zh-CN/tree.md b/examples/docs/zh-CN/tree.md index 6fd481d82..275cf3106 100644 --- a/examples/docs/zh-CN/tree.md +++ b/examples/docs/zh-CN/tree.md @@ -17,27 +17,27 @@ .filter-tree { margin-top: 20px; } - + .custom-tree-container { display: flex; margin: -24px; } - + .block { flex: 1; padding: 8px 24px 24px; - + &:first-child { border-right: solid 1px #eff2f6; } - + > p { text-align: center; margin: 0; line-height: 4; } } - + .custom-tree-node { flex: 1; display: flex; @@ -274,7 +274,7 @@ if (node.data.name === 'region1') { hasChild = true; } else if (node.data.name === 'region2') { - hasChild = false; + hasChild = false; } else { hasChild = Math.random() > 0.5; } @@ -1200,6 +1200,7 @@ | show-checkbox | 节点是否可被选择 | boolean | — | false | | check-strictly | 在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false | boolean | — | false | | default-checked-keys | 默认勾选的节点的 key 的数组 | array | — | — | +| current-node-key | 当前选中的节点 | string, number | — | — | | filter-node-method | 对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | — | — | | accordion | 是否每次只打开一个同级树节点展开 | boolean | — | false | | indent | 相邻级节点间的水平缩进,单位为像素 | number | — | 16 | diff --git a/packages/tree/src/tree.vue b/packages/tree/src/tree.vue index d9a7e7431..a5cae37a5 100644 --- a/packages/tree/src/tree.vue +++ b/packages/tree/src/tree.vue @@ -94,6 +94,7 @@ }, defaultCheckedKeys: Array, defaultExpandedKeys: Array, + currentNodeKey: [String, Number], renderContent: Function, showCheckbox: { type: Boolean, diff --git a/test/unit/specs/tree.spec.js b/test/unit/specs/tree.spec.js index 935919ea5..86bef43df 100644 --- a/test/unit/specs/tree.spec.js +++ b/test/unit/specs/tree.spec.js @@ -202,14 +202,11 @@ 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('current-node-key', () => { + vm = getTreeVm(':props="defaultProps" default-expand-all highlight-current node-key="id" :current-node-key="11"'); + const currentNodeLabel = document.querySelector('.is-current .el-tree-node__label').textContent; + + expect(currentNodeLabel).to.be.equal('二级 1-1'); }); it('defaultExpandAll', () => {