| | |
|---|
| | | </el-header> |
|---|
| | | <el-container> |
|---|
| | | <el-aside class="el-aside" :style="'height: ' + mainHeight"> |
|---|
| | | <el-scrollbar> |
|---|
| | | <el-scrollbar :noresize="true" style="position: relative;"> |
|---|
| | | <slot name="aside"></slot> |
|---|
| | | </el-scrollbar> |
|---|
| | | </el-aside> |
|---|
| | |
|---|
| | | if (this.$refs.headerRef) { |
|---|
| | | const h1 = this.$refs.headerRef.$el.offsetHeight; |
|---|
| | | const h = h1; |
|---|
| | | return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`; |
|---|
| | | return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2 + 6px)`; |
|---|
| | | } else { |
|---|
| | | return `calc(100vh - 60px * 2 - var(--el-main-padding) * 2)`; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.mainHeight = this.calHeight(); |
|---|
| | | 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); */ |
|---|
| | | /* 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 { |
|---|
