问题描述
- 需要el-table始终充满父容器
- 没有数据的时候需要充满父容器
- 数据很多的时候,出现滚动条,并充满父容器
- 有数据但数据不多的时候(比如少于10条),依然要充满父容器
效果
无数据
少量数据
大量数据
关键实现点
以上面截图为例
- el-table所在的父容器为flex布局,且完全充满
- 通过设置el-table的height来让有很多数据时,出现滚动条
- 在组件mounted函数以window.resize回调函数中获取父容器的实际高度(
this.$refs.tableContainerRef.offsetHeight), 并设置给el-table的height