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

* Add currentNodeKey property declaration, fix test for currentNodeKey

* translate Chines doc
pull/13360/head
Anton Kuznetsov 2018-11-08 14:28:24 +03:00 committed by hetech
parent d1440c9608
commit 2b7fa617ae
5 changed files with 38 additions and 37 deletions

View File

@ -22,22 +22,22 @@
display: flex; display: flex;
margin: -24px; margin: -24px;
} }
.block { .block {
flex: 1; flex: 1;
padding: 8px 24px 24px; padding: 8px 24px 24px;
&:first-child { &:first-child {
border-right: solid 1px #eff2f6; border-right: solid 1px #eff2f6;
} }
> p { > p {
text-align: center; text-align: center;
margin: 0; margin: 0;
line-height: 4; line-height: 4;
} }
} }
.custom-tree-node { .custom-tree-node {
flex: 1; flex: 1;
display: flex; display: flex;
@ -150,7 +150,7 @@
}] }]
}] }]
}]; }];
const data6 = [{ const data6 = [{
label: 'Level one 1', label: 'Level one 1',
children: [{ 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 | | 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 | | 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 | — | — | | 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) | — | — | | 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 | | 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 | | indent | horizontal indentation of nodes in adjacent levels in pixels | number | — | 16 |

View File

@ -4,40 +4,40 @@
width: 20px; width: 20px;
background: #ddd; background: #ddd;
} }
.folder { .folder {
width: 20px; width: 20px;
background: #888; background: #888;
} }
.buttons { .buttons {
margin-top: 20px; margin-top: 20px;
} }
.filter-tree { .filter-tree {
margin-top: 20px; margin-top: 20px;
} }
.custom-tree-container { .custom-tree-container {
display: flex; display: flex;
margin: -24px; margin: -24px;
} }
.block { .block {
flex: 1; flex: 1;
padding: 8px 24px 24px; padding: 8px 24px 24px;
&:first-child { &:first-child {
border-right: solid 1px #eff2f6; border-right: solid 1px #eff2f6;
} }
> p { > p {
text-align: center; text-align: center;
margin: 0; margin: 0;
line-height: 4; line-height: 4;
} }
} }
.custom-tree-node { .custom-tree-node {
flex: 1; flex: 1;
display: flex; display: flex;
@ -219,7 +219,7 @@
this.$refs.tree2.filter(val); this.$refs.tree2.filter(val);
} }
}, },
methods: { methods: {
handleCheckChange(data, checked, indeterminate) { handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate); console.log(data, checked, indeterminate);
@ -268,7 +268,7 @@
} else { } else {
hasChild = Math.random() > 0.5; hasChild = Math.random() > 0.5;
} }
setTimeout(function() { setTimeout(function() {
let data; let data;
if (hasChild) { if (hasChild) {
@ -280,7 +280,7 @@
} else { } else {
data = []; data = [];
} }
resolve(data); resolve(data);
}, 500); }, 500);
}, },
@ -289,7 +289,7 @@
return resolve([{ name: 'region' }]); return resolve([{ name: 'region' }]);
} }
if (node.level > 1) return resolve([]); if (node.level > 1) return resolve([]);
setTimeout(() => { setTimeout(() => {
const data = [{ const data = [{
name: 'leaf', name: 'leaf',
@ -297,7 +297,7 @@
}, { }, {
name: 'zone' name: 'zone'
}]; }];
resolve(data); resolve(data);
}, 500); }, 500);
}, },
@ -332,14 +332,14 @@
} }
data.children.push(newChild); data.children.push(newChild);
}, },
remove(node, data) { remove(node, data) {
const parent = node.parent; const parent = node.parent;
const children = parent.data.children || parent.data; const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id); const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1); children.splice(index, 1);
}, },
renderContent(h, { node, data, store }) { renderContent(h, { node, data, store }) {
return ( return (
<span class="custom-tree-node"> <span class="custom-tree-node">
@ -350,13 +350,13 @@
</span> </span>
</span>); </span>);
}, },
filterNode(value, data) { filterNode(value, data) {
if (!value) return true; if (!value) return true;
return data.label.indexOf(value) !== -1; return data.label.indexOf(value) !== -1;
} }
}, },
data() { data() {
return { return {
data, 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 | | 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 | | 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 | — | — | | 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) | — | — | | 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 | | 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 | | 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 ### Scoped Slot
| Name | Description | | 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 }. |

View File

@ -17,27 +17,27 @@
.filter-tree { .filter-tree {
margin-top: 20px; margin-top: 20px;
} }
.custom-tree-container { .custom-tree-container {
display: flex; display: flex;
margin: -24px; margin: -24px;
} }
.block { .block {
flex: 1; flex: 1;
padding: 8px 24px 24px; padding: 8px 24px 24px;
&:first-child { &:first-child {
border-right: solid 1px #eff2f6; border-right: solid 1px #eff2f6;
} }
> p { > p {
text-align: center; text-align: center;
margin: 0; margin: 0;
line-height: 4; line-height: 4;
} }
} }
.custom-tree-node { .custom-tree-node {
flex: 1; flex: 1;
display: flex; display: flex;
@ -274,7 +274,7 @@
if (node.data.name === 'region1') { if (node.data.name === 'region1') {
hasChild = true; hasChild = true;
} else if (node.data.name === 'region2') { } else if (node.data.name === 'region2') {
hasChild = false; hasChild = false;
} else { } else {
hasChild = Math.random() > 0.5; hasChild = Math.random() > 0.5;
} }
@ -1200,6 +1200,7 @@
| show-checkbox | 节点是否可被选择 | boolean | — | false | | show-checkbox | 节点是否可被选择 | boolean | — | false |
| check-strictly | 在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false | boolean | — | false | | check-strictly | 在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false | boolean | — | false |
| default-checked-keys | 默认勾选的节点的 key 的数组 | array | — | — | | default-checked-keys | 默认勾选的节点的 key 的数组 | array | — | — |
| current-node-key | 当前选中的节点 | string, number | — | — |
| filter-node-method | 对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | — | — | | filter-node-method | 对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | — | — |
| accordion | 是否每次只打开一个同级树节点展开 | boolean | — | false | | accordion | 是否每次只打开一个同级树节点展开 | boolean | — | false |
| indent | 相邻级节点间的水平缩进,单位为像素 | number | — | 16 | | indent | 相邻级节点间的水平缩进,单位为像素 | number | — | 16 |

View File

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

View File

@ -202,14 +202,11 @@ describe('Tree', () => {
}); });
}); });
it('current-node-key', done => { it('current-node-key', () => {
vm = getTreeVm(':props="defaultProps" :current-node-key="1"'); vm = getTreeVm(':props="defaultProps" default-expand-all highlight-current node-key="id" :current-node-key="11"');
const firstNode = document.querySelector('.el-tree-node'); const currentNodeLabel = document.querySelector('.is-current .el-tree-node__label').textContent;
firstNode.click();
vm.$nextTick(() => { expect(currentNodeLabel).to.be.equal('二级 1-1');
expect(firstNode.classList.contains('is-current')).to.true;
done();
});
}); });
it('defaultExpandAll', () => { it('defaultExpandAll', () => {