When elder-UI’s el-tree expands or contracts, it gets the number of nodes on the current page

1. Declare a variable in vue data to record the number of nodes on the current page

data(){
    return{... num =0; }}Copy the code

2. Listen for expansion and collapse events in the el-tree tag, @node-expand=”openNode” @node-collapse=”closeNode”
3. Gets the number of nodes loaded for the first time

if (this.treeOpenNum === 0) {
    this.treeOpenNum = this.mpmPartChildrenTable.length + 1;
     } else {
    // Note that the @node-expand event does not get the number of children of the expanded node when the node needs to be expanded from the interface for the first time
    this.treeOpenNum += this.mpmPartChildrenTable.length; }}Copy the code

3. Define the above two methods in 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--; }}); }}}Copy the code