在Element UI的表格组件中,要想固定表头,必须给表格指定一个高度,但是用户的屏幕大小是不一样的,为了能将表格底部的分页区域始终显示在屏幕内,就需要动态计算表格的高度。
以下是代码实现:
<template>
<div class="table-container">
<!-- 1. 绑定动态计算的表格高度 -->
<el-table :data="data" style="width:100%" :height="tableHeight">
...
...
</el-table>
</div>
</template>
<script>
export default {
name:"index",
data() {
return {
// 2. 声明表格高度的变量
tableHeight:0,
};
},
created() {
// 3. 动态计算表格高度
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
// 此处减去100即为当前屏幕内除了表格高度以外其它内容的总高度,
this.tableHeight = windowHeight - 100;
},
};
</script>
注意:上面代码中第3步的减100,根据实际情况而定,通常包含面包屑区域高度、条件检索区域高度、底部分页区域的高度。
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有