vue+el-table实现展开与折叠-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue+el-table实现展开与折叠。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本文会提到两种实现方法，之前我使用的是第一种，后来加了固定列，发现展开与折叠失效，故而出现了第二种方法。

一、通过class名称获取节点，并对节点进行操作（该方法表格添加固定列会失效）

1.全部展开

    looAll(){
        let expandElementList = document.getElementsByClassName(
          "el-table__expand-icon"
        );
        if (this.dataList.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 = this.$el.getElementsByClassName("dafult");
            for (let k = 0; k < dafult.length; k++) {
              // 点击事件：触发展开图标的点击事件
              dafult[k].click();
            }
          }
        }
      },

2.全部折叠文章来源地址https://www.toymoban.com/news/detail-621102.html

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

      }

二、通过el-table中的 toggleRowSelection方法来实现展开与折叠功能

	 //展开
     looAll(){
        this.$nextTick(() => {
          this.forArr(this.dataList, true)
        })
      },
      //折叠
      closeAll(){
        this.$nextTick(() => {
          this.forArr(this.dataList, false)
        })

      },
      // 遍历
      forArr(arr, isExpand) {
        arr.forEach(i => {
          // toggleRowExpansion(i, isExpand)用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
          this.$refs.tableData.toggleRowExpansion(i, isExpand)
          if (i.children) {
            this.forArr(i.children, isExpand)
          }
        })
      },