Element表格el-table固定表头且高度占满

简介: 本文目录1. 固定表头2. 占满高度3. 使用vh占满高度4. 动态调整高度

1. 固定表头

el-table固定表头非常简单,只要给添加height属性即可。


<el-table height="250"></el-table>


2. 占满高度

如果想让表格占满当前高度,必要前提是让父元素的高度先撑满当前高度。


<div style="height:100%">

<el-table height="100%"></el-table>

</div>


3. 使用vh占满高度

而有些情况下,设置height为100%只能保证固定表头,高度无法占满,此时可以尝试使用。注意1vh表示可视区域的高度的1%,还是非常好用的。


<div style="height:100%">

<el-table height="100vh"></el-table>

</div>


注意使用vh后,会发现虽然占满了,但是表头又无法固定了…


我太难了。。


4. 动态调整高度

最终还有一个方案,就是动态调整:


<div class="table-container">

<el-table :height="elTableHeight "></el-table>

</div>


 mounted: function () {

   // 高度调整

   this.elTableHeight = $('.table-container').height();

 

大功告成!

相关文章
|
JavaScript
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
问题原因:多个tabs共用一个实体,动态显示隐藏列 出现了固定在右侧的列(fixed="right")错位 【解决方案】 表格的重新布局,只要table数据发生变化的时候就重新渲染表格 ```js this.$nextTick(() => { this.$refs.formname.doLayout() }) ``` 参考element官方文档 ![请在此添加图片描述](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/5877188/20231030-e40
248 0
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
Element的el-table行列错位对不齐问题处理
本文目录 1. 问题表现 2. 问题发现 3. 问题处理 4. 另一种处理方案
3810 0
Element的el-table行列错位对不齐问题处理
element ui table 表格高度自适应
设置element ui table 表格高度自适应
2181 0
Html Table 固定或自定义列宽度
Html Table 固定或自定义列宽度
181 0
HTML table表格元素边框修改为单线
HTML table表格元素边框修改为单线
element plus表格的表头和内容居中
element plus表格的表头和内容居中
498 0
|
6月前
|
前端开发 小程序
使用element UI-table表格列宽自适应 【已解决】
使用element UI-table表格列宽自适应 【已解决】
369 0
|
JSON 数据格式
bootstrap-table表格超过长度自动隐藏
bootstrap-table表格超过长度自动隐藏
179 0
|
开发者
element el-table固定列凹陷问题
element el-table固定列凹陷问题
111 0