vue+el-table实现展开与折叠

  • Post author:
  • Post category:vue


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



一、通过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.全部折叠

   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)
          }
        })
      },



版权声明:本文为weixin_46054723原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。