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