1.在vue的data中声明一个变量用来记录当前页面的节点数
data(){
return {
...
num = 0;
}
}
- 在el-tree标签中监听展开和收缩事件, @node-expand="openNode" @node-collapse="closeNode"
- 获取首次加载的节点数
if (this.treeOpenNum === 0) {
this.treeOpenNum = this.mpmPartChildrenTable.length + 1;
} else {
// 注意:这里是当节点首次展开需要从接口获取子节点时,@node-expand 这个监听节点展开事件获取不到展开节点的子节点个数的
this.treeOpenNum += this.mpmPartChildrenTable.length;
}
}
- 在methods中定义上面两个方法
methods:{
...,
openNode (data, node, self) {
this.openNodeNum(node);
},
closeNode (data, node, self) {
this.closeNodeNum(node);
},
openNodeNum (node) {
node.childNodes.forEach((item) => {
if (item.expanded) {
this.treeOpenNum++;
this.openNodeNum(item);
} else {
this.treeOpenNum++;
}
});
},
closeNodeNum (node) {
node.childNodes.forEach((item) => {
if (item.expanded) {
this.treeOpenNum--;
this.closeNodeNum(item);
} else {
this.treeOpenNum--;
}
});
}
}
}