element-ui の折りたたみ高さを取得します。

エルテーブルは折りたたみパネルの下にあるため、折りたたみパネルを折りたたむと、高さに応じてテーブルも適応的に高くなり、見える領域が広くなることが想像されます。

折りたたみパネルはアニメーションを使用するため、アニメーションの終了を監視し、折りたたまれた高さを取得してから、テーブルの最大高さを更新する必要があります。

           <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>