github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Tree: render when node expand

pull/6325/head
Dreamacro 2017-08-03 11:54:42 +08:00 committed by 杨奕
parent 4348420277
commit 54e5cd2340
2 changed files with 29 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/tree/src/tree-node.vue
View File

@ -3,7 +3,7 @@
@click.stop="handleClick" @click.stop="handleClick"
v-show="node.visible" v-show="node.visible"
:class="{ :class="{
'is-expanded': childNodeRendered && expanded, 'is-expanded': expanded,
'is-current': tree.store.currentNode === node, 'is-current': tree.store.currentNode === node,
'is-hidden': !node.visible 'is-hidden': !node.visible
}"> }">
@ -31,6 +31,7 @@
<el-collapse-transition> <el-collapse-transition>
<div <div
class="el-tree-node__children" class="el-tree-node__children"
v-if="childNodeRendered"
v-show="expanded"> v-show="expanded">
<el-tree-node <el-tree-node
:render-content="renderContent" :render-content="renderContent"
@ -110,7 +111,7 @@
}, },
'node.expanded'(val) { 'node.expanded'(val) {
this.expanded = val; this.$nextTick(() => this.expanded = val);
if (val) { if (val) {
this.childNodeRendered = true; this.childNodeRendered = true;
} }

41
test/unit/specs/tree.spec.js
View File

@ -119,7 +119,7 @@ describe('Tree', () => {
const ALL_NODE_COUNT = 9; const ALL_NODE_COUNT = 9;
it('create', () => { it('create', () => {
vm = getTreeVm(':props="defaultProps"'); vm = getTreeVm(':props="defaultProps" default-expand-all');
expect(document.querySelector('.el-tree')).to.exist; expect(document.querySelector('.el-tree')).to.exist;
expect(document.querySelectorAll('.el-tree > .el-tree-node').length).to.equal(3); expect(document.querySelectorAll('.el-tree > .el-tree-node').length).to.equal(3);
expect(document.querySelectorAll('.el-tree .el-tree-node').length).to.equal(ALL_NODE_COUNT); expect(document.querySelectorAll('.el-tree .el-tree-node').length).to.equal(ALL_NODE_COUNT);
@ -245,7 +245,7 @@ describe('Tree', () => {
tree.filter('2-1'); tree.filter('2-1');
setTimeout(() => { setTimeout(() => {
expect(tree.$el.querySelectorAll('.el-tree-node.is-hidden').length).to.equal(7); expect(tree.$el.querySelectorAll('.el-tree-node.is-hidden').length).to.equal(3);
done(); done();
}, 100); }, 100);
}); });
@ -259,13 +259,19 @@ describe('Tree', () => {
expect(vm.$el.querySelectorAll('.el-tree-node.is-expanded').length).to.equal(3); expect(vm.$el.querySelectorAll('.el-tree-node.is-expanded').length).to.equal(3);
}); });
it('autoExpandParent = false', () => { it('autoExpandParent = false', (done) => {
vm = getTreeVm(':props="defaultProps" :default-expanded-keys="defaultExpandedKeys" node-key="id" :auto-expand-parent="false"', { vm = getTreeVm(':props="defaultProps" :default-expanded-keys="defaultExpandedKeys" node-key="id" :auto-expand-parent="false"', {
created() { created() {
this.defaultExpandedKeys = [111]; this.defaultExpandedKeys = [11];
} }
}); });
expect(vm.$el.querySelectorAll('.el-tree-node.is-expanded').length).to.equal(1); expect(vm.$el.querySelectorAll('.el-tree-node.is-expanded').length).to.equal(0);
const firstNode = document.querySelector('.el-tree-node__content');
firstNode.querySelector('.el-tree-node__expand-icon').click();
setTimeout(() => {
expect(document.querySelectorAll('.el-tree-node.is-expanded').length).to.equal(2);
done();
}, 100);
}); });
it('defaultCheckedKeys & check-strictly = false', () => { it('defaultCheckedKeys & check-strictly = false', () => {
@ -289,25 +295,26 @@ describe('Tree', () => {
it('show checkbox', done => { it('show checkbox', done => {
vm = getTreeVm(':props="defaultProps" show-checkbox'); vm = getTreeVm(':props="defaultProps" show-checkbox');
const tree = vm.$children[0]; const tree = vm.$children[0];
const secondNode = document.querySelectorAll('.el-tree-node__content')[3]; const secondNode = document.querySelectorAll('.el-tree-node__content')[1];
const nodeCheckbox = secondNode.querySelector('.el-checkbox'); const nodeCheckbox = secondNode.querySelector('.el-checkbox');
expect(nodeCheckbox).to.be.exist; expect(nodeCheckbox).to.be.exist;
nodeCheckbox.click(); nodeCheckbox.click();
expect(tree.getCheckedNodes().length).to.equal(3); expect(tree.getCheckedNodes().length).to.equal(3);
expect(tree.getCheckedNodes(true).length).to.equal(2); expect(tree.getCheckedNodes(true).length).to.equal(2);
secondNode.querySelector('.el-tree-node__expand-icon').click();
setTimeout(() => {
const firstLeaf = secondNode.nextElementSibling.querySelector('.el-tree-node__content'); const firstLeaf = secondNode.nextElementSibling.querySelector('.el-tree-node__content');
const leafCheckbox = firstLeaf.querySelector('.el-checkbox'); const leafCheckbox = firstLeaf.querySelector('.el-checkbox');
vm.$nextTick(() => {
leafCheckbox.click(); leafCheckbox.click();
expect(tree.getCheckedNodes().length).to.equal(1); expect(tree.getCheckedNodes().length).to.equal(1);
done(); done();
}); }, 100);
}); });
it('setCheckedNodes', (done) => { it('setCheckedNodes', (done) => {
vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"'); vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
const tree = vm.$children[0]; const tree = vm.$children[0];
const secondNode = document.querySelectorAll('.el-tree-node__content')[3]; const secondNode = document.querySelectorAll('.el-tree-node__content')[1];
const nodeCheckbox = secondNode.querySelector('.el-checkbox'); const nodeCheckbox = secondNode.querySelector('.el-checkbox');
nodeCheckbox.click(); nodeCheckbox.click();
expect(tree.getCheckedNodes().length).to.equal(3); expect(tree.getCheckedNodes().length).to.equal(3);
@ -443,7 +450,7 @@ describe('Tree', () => {
}); });
it('set disabled checkbox', done => { it('set disabled checkbox', done => {
vm = getDisableTreeVm(':props="defaultProps" show-checkbox node-key="id"'); vm = getDisableTreeVm(':props="defaultProps" show-checkbox node-key="id" default-expand-all');
const node = document.querySelectorAll('.el-tree-node__content')[2]; const node = document.querySelectorAll('.el-tree-node__content')[2];
const nodeCheckbox = node.querySelector('.el-checkbox input'); const nodeCheckbox = node.querySelector('.el-checkbox input');
vm.$nextTick(() => { vm.$nextTick(() => {
@ -453,7 +460,7 @@ describe('Tree', () => {
}); });
it('check strictly', (done) => { it('check strictly', (done) => {
vm = getTreeVm(':props="defaultProps" show-checkbox check-strictly'); vm = getTreeVm(':props="defaultProps" show-checkbox check-strictly default-expand-all');
const tree = vm.$children[0]; const tree = vm.$children[0];
const secondNode = document.querySelectorAll('.el-tree-node__content')[3]; const secondNode = document.querySelectorAll('.el-tree-node__content')[3];
const nodeCheckbox = secondNode.querySelector('.el-checkbox'); const nodeCheckbox = secondNode.querySelector('.el-checkbox');
@ -506,11 +513,11 @@ describe('Tree', () => {
} }
} }
}); });
const firstNode = document.querySelector('.el-tree-node__content'); const nodes = document.querySelectorAll('.el-tree-node__content');
expect(firstNode.nextElementSibling.childNodes.length).to.equal(0); expect(nodes.length).to.equal(2);
firstNode.click(); nodes[0].click();
setTimeout(() => { setTimeout(() => {
expect(firstNode.nextElementSibling.childNodes.length).to.equal(2); expect(document.querySelectorAll('.el-tree-node__content').length).to.equal(4);
done(); done();
}, 100); }, 100);
}); });
@ -557,7 +564,7 @@ describe('Tree', () => {
} }
}); });
const firstNode = document.querySelector('.el-tree-node__content'); const firstNode = document.querySelector('.el-tree-node__content');
expect(firstNode.nextElementSibling.childNodes.length).to.equal(0); expect(firstNode.nextElementSibling).to.not.exist;
firstNode.click(); firstNode.click();
setTimeout(() => { setTimeout(() => {
expect(vm.nodeExpended).to.equal(true); expect(vm.nodeExpended).to.equal(true);
@ -572,7 +579,7 @@ describe('Tree', () => {
}); });
it('updateKeyChildren', (done) => { it('updateKeyChildren', (done) => {
vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"'); vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id" default-expand-all');
const tree = vm.$children[0]; const tree = vm.$children[0];
tree.updateKeyChildren(1, [{ tree.updateKeyChildren(1, [{
id: 111, id: 111,