src/components/core/BaseContentLayout.vue
@@ -1,15 +1,15 @@
<template>
  <el-container>
    <el-header class="el-header">
    <el-header ref="headerRef" class="el-header">
      <slot name="header"></slot>
    </el-header>
    <el-container>
      <el-aside class="el-aside">
        <el-scrollbar>
      <el-aside class="el-aside" :style="{ height: mainHeight + 'px' }">
        <el-scrollbar :noresize="false">
          <slot name="aside"></slot>
        </el-scrollbar>
      </el-aside>
      <el-main class="el-main">
      <el-main class="el-main" :style="{ height: mainHeight + 'px' }">
        <slot name="main"></slot>
      </el-main>
    </el-container>
@@ -18,33 +18,60 @@
<script>
export default {
  inject: ['contentMaxHeight'],
  // 右侧操作界面基础布局
  data() {
    return {
      mainHeight: this.contentMaxHeight.value
    };
  },
  methods: {
    // 内容高度
    calHeight() {
      if (this.$refs.headerRef) {
        const h1 = this.$refs.headerRef.$el.offsetHeight;
        const h = h1;
        return this.contentMaxHeight.value - h;
        // return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2 + 6px)`;
      } else {
        return this.contentMaxHeight.value;
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.mainHeight = this.calHeight();
    }, 150);
  }
};
</script>
<style scoped>
.el-aside {
  /* width: initial; */
  /* overflow-x: auto; */
  position: relative;
  height: calc(100vh - 60px * 2 - 20px * 2);
  /* height: calc(100vh - 60px * 2 - 20px * 2); */
  /* background-color: aqua; */
  /* overflow-y: auto; */
  border-right: 1px solid var(--el-color-info-light-7);
  /* box-shadow: -10px 0px 4px rgba(0, 0, 0, 0.12) inset; */
}
.el-header {
  /* height: initial; */
  padding: 0;
  height: initial;
  padding: 0 0 4px 0;
  /* background-color: rgb(216, 201, 201); */
  /* border-bottom: 1px solid var(--el-color-info-light-7); */
  /* margin-bottom: 4px; */
}
.el-main {
  position: relative;
  /* background-color: whitesmoke; */
  height: calc(100vh - 60px * 2 - 20px * 2);
  /* height: calc(100vh - 60px * 2 - 20px * 2); */
  padding: initial;
  padding-left: 20px;
  padding-left: 10px;
  /* overflow: hidden; */
}
</style>