Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Element 中根据屏幕大小动态计算表格高度以实现固定表头

Element 中根据屏幕大小动态计算表格高度以实现固定表头

作者头像
越陌度阡
发布于 2021-02-01 03:57:40
发布于 2021-02-01 03:57:40
2.6K00
代码可运行
举报
运行总次数:0
代码可运行

在Element UI的表格组件中,要想固定表头,必须给表格指定一个高度,但是用户的屏幕大小是不一样的,为了能将表格底部的分页区域始终显示在屏幕内,就需要动态计算表格的高度。

以下是代码实现:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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,根据实际情况而定,通常包含面包屑区域高度、条件检索区域高度、底部分页区域的高度。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/01/26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
Vue 实现下拉加载更多
熟悉Element-UI的开发者可能都会有这样的经历,它的无限滚动 InfiniteScroll 并不好用,下面介绍两种下拉加载的实现方法:
越陌度阡
2020/12/03
3.1K0
element侧栏固定,header固定,利用ref
element的Container 布局容器如下,可是如何保证header和aside固定呢?
hotqin888
2019/04/09
6.5K0
浏览器中的几个高度
载入首批数据,文档高度( $('html').height() == 2500px )
Z4
2020/04/21
1.9K0
JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」
在我本地测试当中: 在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可获得,很简单,很方便。 而在公司项目当中: Opera仍然使用 document.body.clientWidth document.body.clientHeight 可是IE和FireFox则使用 document.documentElement.clientWidth document.documentElement.clientHeight 原来是W3C的标准在作怪啊
全栈程序员站长
2022/09/16
7.7K0
JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」
使用Vue来完成项目中的首页导航+左侧菜单
目录 1. 准备工作 2. 动态树 2.1 在配置请求路径 2.2 使用动态数据构建导航菜单 2.2.1 通过接口获取数据 2.2.3 通过后台获取的数据构建菜单导航 2.3 点击菜单实现路由跳转 2.3.1 创建书本管理组件 2.3.2 配置路由 2.3.3 修改LeftAside组件 2.3.4 修改Main组件 3. 系统首页配置 4. 表格数据显示 4.1 页面布局 4.2 查询并在表格中显示数据 4.3 实现分页 1. 🍓🍓🍓🍓准备工作 创建测试数据库 准备好后台服务接口,Moudel查询,和Bo
用户10196776
2022/11/22
2.6K0
使用Vue来完成项目中的首页导航+左侧菜单
JS实现无限分页加载——原理图解
由于网页的执行都是单线程的,在JS执行的过程中,页面会呈现阻塞状态。因此,如果JS处理的数据量过大,过程复杂,可能会造成页面的卡顿。传统的数据展现都以分页的形式,但是分页的效果并不好,需要用户手动点击下一页,才能看到更多的内容。 有很多网站使用 无限分页 的模式,即网页视窗到达内容底部就自动加载下一部分的内容... 本篇就无限分页的实现模型,讲述其中奥妙。 原理图 实现无限分页的过程大致如下: 1 视窗滚动到底部 2 触发加载,添加到现有内容的后面。 因此,可能会出现两种情况: 1 当页面的内容很
用户1154259
2018/01/17
6.1K0
JS实现无限分页加载——原理图解
仿qq空间好友动态刷新
在qq空间里有好多网页特效值得初学html和js的去学习,今天我来介绍一种特效。我们在上qq空间是都会发现,当向下滚动鼠标,使滚动条到达最低端的时候,好友动态会自动增加。这种特效其实很简单,多余的不说了,直接上代码:
OECOM
2020/07/02
1.4K0
热点面试题:JS 如何判断一个元素是否在可视区域内?
•问题标注 Q:(question)•答案标注 R:(result)•注意事项标准:A:(attention matters)•详情描述标注:D:(detail info)•总结标注:S:(summary)•分析标注:Ana:(analysis)•提示标注:T:(tips)
沉浸式趣谈
2024/03/13
3860
热点面试题:JS 如何判断一个元素是否在可视区域内?
JQuery iframe宽高度自适应浏览器窗口大小的解决方法
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
授客
2019/08/21
7K0
JQuery iframe宽高度自适应浏览器窗口大小的解决方法
vue09动态树+数据表格+分页模糊查
14天阅读挑战赛 努力是为了不平庸~ 目录 1. 准备工作  2. 动态树 2.1 在配置请求路径 2.2 使用动态数据构建导航菜单 2.2.1 通过接口获取数据  2.2.3 通过后台获取的数据构建菜单导航 2.3 点击菜单实现路由跳转 2.3.1 创建书本管理组件 2.3.2 配置路由 2.3.3 修改LeftAside组件 2.3.4 修改Main组件 3. 系统首页配置 4. 表格数据显示 4.1 页面布局 4.2 查询并在表格中显示数据 4.3 实现分页 ---- 1. 准备工作 创建测试数据库
天蝎座的程序媛
2022/11/18
1.2K0
vue09动态树+数据表格+分页模糊查
在 Vue3 + Element Plus 中生成动态表格,动态修改表格,多级表头,合并单元格
在 Vue3 + Element Plus 中生成动态表格,动态修改表格,多级表头,合并单元格
蒋川@卡拉云
2022/06/08
14.6K0
在 Vue3 + Element Plus 中生成动态表格,动态修改表格,多级表头,合并单元格
【前端三分钟】锚点自动跟随滚动定位
最近看到写 “锚点自动跟随滚动定位”的方法,大都是基于JQ,或者是第三方。 所以,进行给出使用原生JS的写法。 什么都不说了,直接上代码(使用模块模式方式):
前端修罗场
2023/10/07
5180
JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转)
网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:document.body.offsetWidth (包括边线的宽)  网页可见区域高:document.body.offsetHeight (包括边线的宽)  网页正文全文宽:document.body.scrollWidth  网页正文全文高:document.body.scrollHeight  网页被卷去的高:document.body.scrollTop  网页被卷去的左:document.body.scrollLeft  网页正文部分上:window.screenTop  网页正文部分左:window.screenLeft  屏幕分辨率的高:window.screen.height  屏幕分辨率的宽:window.screen.width  屏幕可用工作区高度:window.screen.availHeight  屏幕可用工作区宽度:window.screen.availWidth  HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置  offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置  event.clientX 相对文档的水平座标  event.clientY 相对文档的垂直座标  event.offsetX 相对容器的水平坐标  event.offsetY 相对容器的垂直坐标  document.documentElement.scrollTop 垂直方向滚动的值  event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量  IE,FireFox 差异如下:  IE6.0、FF1.06+:  clientWidth = width + padding  clientHeight = height + padding  offsetWidth = width + padding + border  offsetHeight = height + padding + border  IE5.0/5.5:  clientWidth = width - border  clientHeight = height - border  offsetWidth = width  offsetHeight = height  (需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
山河木马
2019/03/05
16.4K0
【SpringBoot+Vue】009-搜索栏和添加用户组件、后台实现查询、用户列表渲染
https://element.eleme.cn/#/zh-CN/component/tooltip
訾博ZiBo
2025/01/06
1250
【SpringBoot+Vue】009-搜索栏和添加用户组件、后台实现查询、用户列表渲染
【HTML代码】在HTML加入图片飘窗的代码[汇总]
DEDE织梦cms常用的参数标签汇总、以及操作过程中的一些bug问题解决方法,dede网站二开,以下龙腾飞网络科技-小吴在建站实操中笔记记录,织梦dede建站教程保存使用非常方便:
攻城狮与产品喵
2025/03/13
1860
【HTML代码】在HTML加入图片飘窗的代码[汇总]
js获得浏览器高度和宽度 参数
document.documentElement.clientHeight -->浏览器的高度
botkenni
2019/09/03
6.3K0
获取可视区域高度赋值给div(解决document.body.clientHeight的返回值为0的问题)
获取可视区域高度赋值给div(解决document.body.clientHeight的返回值为0的问题) 设置html,body{height:100%} 在使用html5文档类型的时候, 设置了html body的高度100%之后,两个浏览器就都能获取document.body.clientHeight了 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>弹出层自定义(自动获取高度)</tit
用户1212940
2018/01/23
2.1K0
使用elementUI构建复杂表格,合并行或列,多级表头等
前端开发过程中常常会遇到各种开发表格的场景,有时候有的表格比较简单有的比较复杂(如下图简单示例所示,有合并项和多级表头),Elementui的el-table控件也可以支持构建复杂的表格,本文将指导你如何快速开发复杂表格~~~
言程序
2024/06/24
3.8K0
js 获取浏览器高度和宽度值(多浏览器)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 Opera中: document.body.clientWidth ==> 可见区域宽度 document.body.clientHeight ==> 可见区域高度 document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 没有定义W3C的标准,则 IE为: document.documentElement.clientWidth ==> 0 document.documentElement.clientHeight ==> 0 FireFox为: document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) Opera为: document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
似水的流年
2018/01/12
7.9K0
javascript 获取多种主流浏览器显示页面高度(转)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 Opera中:  document.body.clientWidth ==> 可见区域宽度 document.body.clientHeight ==> 可见区域高度 document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 没有定义W3C的标准,则 IE为: document.documentElement.clientWidth ==> 0 document.documentElement.clientHeight ==> 0 FireFox为: document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) Opera为: document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
lin_zone
2018/08/15
1K0
推荐阅读
相关推荐
Vue 实现下拉加载更多
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验