vue+element项目,页面需要展示表格,表格可以翻页,可以选择每页显示条数
如果不给表格设置高度,当数据量很少时,页面会很空;当数据量很大,又选择100条/页时,页面需要滚动很久才能找到翻页按钮
如果给表格设置高度,很难设置一个合适的固定高度(毕竟显示器分辨率那么多)
解决这个问题的方案如下:
1.首先给表格加一个父元素,计算父元素的高度 = 100% - 其他元素的高度
<div id="tableCase">
<el-table>
</el-table>
</div>
/* css */
#tableCase {
min-height: 100px;
height: calc(100vh - 330px);
overflow: auto;
}
2.然后给表格设置高度为100%就可以啦
<el-table height="100%"></el-table>
这样计算之后就可以在不同分辨率的显示器上都显示全屏的表格了(滚动条会在父元素内)
效果如下:
效果图
vue+element项目,页面需要展示表格,表格可以翻页,可以选择每页显示条数如果不给表格设置高度,当数据量很少...
问题：当表格设置固定高度height同时某一列固定fixed在表格左侧或右侧时，查询数据，表格出现竖向滚动条时，将...
通过css3新属性position：sticky实现表头固定内容滚动（表格外用div包裹给div一个高度） htm...
Table 表格固定表头却无法自适应高度 Message 消息提示--渲染页面后消失
我们常用到动态计算页面的内容，假设我们需要动态给表格设置高度来实现表格铺满整个屏幕的效果。表格高度=documen...
问题背景 在使用element-plus 表格组件时，需要固定表头，高度自适应页面大小，在父组件中获取容器的高度，...
给表格设置了固定高度(height属性)之后,页面多切换几次发现了一堆问题.不知道是我哪里写错了还是怎样,总之,现...
事情的起因是想学别人做一个晨间笔记的模板，最后也没有做成功。直接从别人那里copy了一份，研究了一下，终于搞明白了...
表格标签的属性： 1.宽度和高度的属性 1）可以给table标签和td标签使用 2)表格的宽度和高度默认是按照内容...
本文标题：给表格固定高度
本文链接：https://www.haomeiwen.com/subject/ksliwktx.html
网友评论