el-table组件的固定表头和高度自适应问题

首先上问题图:

el-table组件的固定表头和高度自适应问题_第1张图片

除了高度超出和没有内部滚动条之外,表头也没有固定直接滚动上去了,我想要的效果是表头固定只有数据滚动,table外面的layout盒子也不滚动,只是表格内容区滚动,并且表格高度刚好和分页条触底,整个表格都在首屏

目标效果图:

el-table组件的固定表头和高度自适应问题_第2张图片

解决方法:

首先高度问题我们可以在el-table外面套一层盒子,高度用calc减去其它的高度给到这个盒子,然后el-table上加上一个props: height="100%" 即可

el-table组件的固定表头和高度自适应问题_第3张图片

el-table组件的固定表头和高度自适应问题_第4张图片 

至于固定表头的做法就是写了height这个props就会自动固定,官方原话:

  

你可能感兴趣的:(vue,elementui)