mirror of https://github.com/ElemeFE/element
Tree: add currentNodeKey property declaration and fix test for currentNodeKey (#13197)
* Add currentNodeKey property declaration, fix test for currentNodeKey * translate Chines docpull/13360/head
Anton Kuznetsov
hetech
parent
d1440c9608
commit
2b7fa617ae
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -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 }. |
|
||||
|
|
|
|||
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -94,6 +94,7 @@
|
|||
},
|
||||
defaultCheckedKeys: Array,
|
||||
defaultExpandedKeys: Array,
|
||||
currentNodeKey: [String, Number],
|
||||
renderContent: Function,
|
||||
showCheckbox: {
|
||||
type: Boolean,
|
||||
|
|
|
|||
|
|
@ -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', () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue