ELEMENT-UI的el-tree展开或收缩时,获取当前页面的节点数

4,193 阅读1分钟

1.在vue的data中声明一个变量用来记录当前页面的节点数

data(){
    return {
        ...
        num = 0;
    }
}
  1. 在el-tree标签中监听展开和收缩事件, @node-expand="openNode" @node-collapse="closeNode"
  2. 获取首次加载的节点数
if (this.treeOpenNum === 0) {
    this.treeOpenNum = this.mpmPartChildrenTable.length + 1;
     } else {
    // 注意:这里是当节点首次展开需要从接口获取子节点时,@node-expand 这个监听节点展开事件获取不到展开节点的子节点个数的
    this.treeOpenNum += this.mpmPartChildrenTable.length;
     }
}
  1. 在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--;
        }
      });
    }
  }
}