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
parent
d1440c9608
commit
2b7fa617ae
|
@ -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 |
|
||||||
|
|
|
@ -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 }. |
|
||||||
|
|
|
@ -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 |
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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', () => {
|
||||||
|
|
Loading…
Reference in New Issue