Tree: add currentNodeKey property declaration and fix test for currentNodeKey (#13197)

* Add currentNodeKey property declaration, fix test for currentNodeKey

* translate Chines doc

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 |

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 (
           <span class="custom-tree-node">
@@ -350,13 +350,13 @@
             </span>
           </span>);
       },
-    
+
       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 }. |
+| — | Contenido personalizado para nodos de tree. El parámetro del scope es { node, data }. |

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 |

packages/tree/src/tree.vue

@@ -94,6 +94,7 @@
       },
       defaultCheckedKeys: Array,
       defaultExpandedKeys: Array,
+      currentNodeKey: [String, Number],
       renderContent: Function,
       showCheckbox: {
         type: Boolean,

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', () => {