Get the Collapse height of element-ui

Because the el-table is under the folding panel, it is imagined that when the folding panel is folded, the table can adaptively become taller according to the height, making the visible area larger.

Because the folding panel uses animation, you need to monitor the end of the animation, obtain the folded height, and then update the maximum height of the table.

           <el-collapse
              v-model="active"
              accordion
              @change="handleCollapseChange"
              ref="myCollapseRef"
            >
              <el-collapse-item title="日历图" name="1">
                <div style="width: 100%; display: flex">
                  <calendar-charts
                    :calendarMonthData="calendarMonthData"
                    :monthNum="time"
                    @getData="getCalendarClickData"
                    ref="calendarRef"
                  ></calendar-charts>
                </div>
              </el-collapse-item>
            </el-collapse>

 

<script>
export default {
  data() {
    return {
     ...
     }
  },
 mounted() {
    this.clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
    this.clientHeight = document.documentElement.clientHeight || document.body.cientHeight;

    // 获取折叠面板折叠前的高度
    const preCollapseHeight = this.$refs.myCollapseRef.$el.offsetHeight;
    this.otherHeight = Math.ceil($(".el-row").outerHeight()) + preCollapseHeight;

    // this.maxHeight1 = this.clientHeight - this.otherHeight - 150 + "px";
   
    window.onresize = () => {
      this.clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      this.updateMaxHeight(this.clientHeight, this.otherHeight);
    };
    this.updateMaxHeight(this.clientHeight, this.otherHeight);
  },

 watch: {
    clientHeight(val) {
      this.updateMaxHeight(val, this.otherHeight);
    },
    otherHeight(val) {
      this.updateMaxHeight(this.clientHeight, val);
    }
  },

methods: {
   updateMaxHeight(clientHeight, otherHeight) {
      if (!this.timer) {
        this.clientHeight = clientHeight;
        this.otherHeight = otherHeight;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          that.maxHeight1 = that.clientHeight - that.otherHeight - 155 + "px";
          //160是顶部和底部button加table上边距的高度
          that.timer = false;
        }, 100);
      }
    },

    // 监听折叠状态
    handleCollapseChange() {
      // 折叠前的高度
      const preCollapseHeight = this.$refs.myCollapseRef.$el.offsetHeight;

      this.otherHeight = Math.ceil($(".el-row").outerHeight()) + preCollapseHeight;

      this.updateMaxHeight(this.clientHeight, this.otherHeight);

      // 监听过渡动画结束事件
      this.$refs.myCollapseRef.$el.addEventListener("transitionend", this.handleTransitionEnd);
    },

    handleTransitionEnd() {
      // 折叠后的高度
      const postCollapseHeight = this.$refs.myCollapseRef.$el.offsetHeight;

      // 移除过渡动画结束事件的监听器
      this.$refs.myCollapseRef.$el.removeEventListener("transitionend", this.handleTransitionEnd);

      // 在这里可以对折叠前后的高度进行处理
      this.otherHeight = Math.ceil($(".el-row").outerHeight()) + postCollapseHeight;

      this.updateMaxHeight(this.clientHeight, this.otherHeight);
    },
  }
}
  
</script>