How to automatically expand all the tree components in el-table

There are two methods, you can try the first one first:
method 1:

 toggleRowExpansion(isExpansion) {
    
    
      this.toggleRowExpansion_forAll(this.tableData, isExpansion );
   
    },

    toggleRowExpansion_forAll(data, isExpansion) {
    
    
      data.forEach((item) => {
    
    
        this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion);
        if (item.children != undefined && item.children != null) {
    
    
          this.toggleRowExpansion_forAll(item.children, isExpansion);
        }
      });
    },

1. Among them, tableData is table data;
2. dataTreeList is el-table component 3;
3. When isExpansion is true, it will be expanded, and if it is false, it will be collapsed.

Method 2:
Principle: It is equivalent to executing the click event of the expansion icon in front of the tree table cell:

let len = document.getElementsByClassName("el-table__expand-icon").length;
 for (let index = 0; index < len; index++) {
    
    
        if (document.getElementsByClassName("el-table__expand-icon")[index]) {
    
    
          document
            .getElementsByClassName("el-table__expand-icon")
            [index].click();
        }
      }

Note: If it does not take effect, it can be placed in the this.$nextTick method.

Guess you like

Origin blog.csdn.net/qq_42931285/article/details/130449262