el-table树形表格全部行的展开和收起

el-table树形表格全部行的展开和收起实践记录：

一、展开与收起分开判断：

        1、全部行展开：

// 全部展开
  toExpandAll() {
    // 获取所有具有子级元素集合
    let expandElementList = document.getElementsByClassName(
      "el-table__expand-icon"
    );
    if (this.tableData.length != 0 && expandElementList.length != 0) {
      for (let i = 0; i < expandElementList.length; i++) {
        // 添加dafult类，如已经存在，取消添加
        expandElementList[i].classList.add("dafult");
      }
      // 获取所有已经展开元素集合
      const expanded = this.$el.getElementsByClassName(
        "el-table__expand-icon--expanded"
      );
      if (expanded) {
        for (let j = 0; j < expanded.length; j++) {
          // 如果已经展开，移除dafult类,剩余未展开的元素带有dafult类
          expanded[j].classList.remove("dafult");
        }
        // 获取所有dafult类：带有展开图标且还未展开的元素
        const dafult: any = this.$el.getElementsByClassName("dafult");
        for (let k = 0; k < dafult.length; k++) {
          // 点击事件：触发展开图标的点击事件
          dafult[k].click();
        }
      }
    }
  }

        2、全部行收起

// 全部收起
  toCloseAll() {
    if (this.tableData.length != 0) {
      // 获取所有已展开元素
      const expanded: any = this.$el.getElementsByClassName(
        "el-table__expand-icon--expanded"
      );
      if (expanded) {
        for (let i = 0; i < expanded.length; i++) {
          // 点击事件：触发展开图标的点击事件
          expanded[i].click();
        }
      }
    }
  }

二、展开与收起交替实现：

// 展开与收起替换
  expanedChange() {
    // 获取所有具有展开图标的元素
    const expanded: any = this.$el.getElementsByClassName(
      "el-table__expand-icon"
    );
    if (expanded) {
      for (let i = 0; i < expanded.length; i++) {
        // 点击事件：触发展开图标的点击事件
        expanded[i].click();
      }
    }
  }