el-table表格高度自适应

892 阅读1分钟

问题描述

  • 需要el-table始终充满父容器
  • 没有数据的时候需要充满父容器
  • 数据很多的时候,出现滚动条,并充满父容器
  • 有数据但数据不多的时候(比如少于10条),依然要充满父容器

效果

无数据

image.png

少量数据

image.png

大量数据

image.png

关键实现点

以上面截图为例

  • el-table所在的父容器为flex布局,且完全充满
  • 通过设置el-table的height来让有很多数据时,出现滚动条
  • 在组件mounted函数以window.resize回调函数中获取父容器的实际高度(this.$refs.tableContainerRef.offsetHeight), 并设置给el-table的height

项目源代码

element-ui-demo