因為el-table在折疊面板下面,所以設想當折疊面板折疊后,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>