高度自适应窗口大小

一般容器自适应窗口高度

<el-container :style="styles" />

data() {
  return {
      styles: { height: '400px' }  
    }
  }
},
mounted() {
  this.styles = { height: (window.innerHeight - 170) + 'px' }
  window.addEventListener('resize', () => {
    this.styles = { height: (window.innerHeight - 170) + 'px' }
  }
}

1.el-drawer在父组件，table表格在子组件时；

2.table直接显示在父页面时

高度自适应窗口大小

<el-table ref="refTable" :max-height="heights" />

data() {
  return {
      heights: '400px'
    }
  }
},
mounted() {
  // 初始化表格高度
  
  // es6语法，在window挂载一个onresize组件时，这个onresize就会被覆盖掉导致高度无法自适应
  if (this.$refs.refTable) {
    this.$nextTick(() => {
      this.heights = window.innerHeight - this.$refs.refTable.$el.offsetTop - 170
      window.onresize = () => {
        this.heights = window.innerHeight - this.$refs.refTable.$el.offsetTop - 170
      }
    })  
  }
}

el-drawer在子组件，table表格在el-drawer里时，高度自适应窗口大小

<el-drawer>
  <el-table ref="refTable" :max-height="heights" />
</el-drawer>

data() {
  return {
      heights: '400px'
    }
  }
},
mounted() {
  // 初始化表格高度
  // es5语法，不会被覆盖
  this.heights = window.innerHeight - 170
  window.addEventListener('resize', () => {
    this.heights = window.innerHeight - 170
  })  
}