el-table中设置max-height属性使其固定表头

最新推荐文章于 2024-05-21 13:11:44 发布
最新推荐文章于 2024-05-21 13:11:44 发布
阅读量2.1k 收藏
点赞数 1
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122829470
版权

场景

若依前后端分离版本地搭建开发环境并运行项目的教程：

若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客_若依前后端分离文档

在上面搭建项目的基础上，el-table显示列表以及选择20条显示时的效果如下

要实现当切换每一页的条数时，表头固定的效果如下

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、查看官方说明

可以直接设置height属性来使其表头固定

2、也可以使用max-height属性来设置表格最大高度，实现上面的效果

霸道流氓气质
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
表头固定，table,div,样式
01-27
报表表头固定，通过div固定table行和列 自动滚动条
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
element-ui el-table 固定表头
XueZePeng18729875380的博客
01-26 2050
1. 官网给出两种种属性来固定表头 height 以及 max-height；但是有个问题就是 height高度会被定死，max-height无法适应不同分辨率的情况。2. 可以进行样式控制表格高度，达到固定表头的需求，就可以避免高度定死的情况。
el-table 增加表格样式，固定表头
最新发布
qq_42549017的博客
05-21 207
3.固定表头用的是 :max-height="tableHeight" 这个属性，加上高度一块使用。if(row[2].includes('合计')){1. el-table中增加 :cell-style="addClass" 属性。2. js中使用 addClass 这个方法，想怎么加样式就怎么加。
Vue 获取dom元素宽高，给el-table表格设置动态高度:height；最大高度:max-heigh
林中明月间丶
06-04 1万+
https://www.jianshu.com/p/371659eb1fe3 //获取table的宽度 :style="'width:'+dataWidths+'px'" letdataWidth=this.$refs.tab1.offsetWidth;//offsetHeight
element table max-height问题
Alone patients的博客
05-27 3108
第一步：utils目录下创建一个文件为directive，新建auto-height.js文件， export default { componentUpdated(el, binding, vnode) { const ctx = vnode.context; if (!ctx || typeof ctx[binding.arg] === 'undefined' || ctx.autoHeightResizeListenner) return; ctx.autoHeightResizeLis
el-table高度根据内容自适应且设置最大高度
hahaha921的博客
03-20 1599
el-table高度根据内容自适应且设置最大高度
Vue根据浏览器窗体变化动态设置Element Table组件的最大高度
2401_83627805的博客
04-05 385
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
vue el-table实现自定义表头
10-15
主要为大家详细介绍了vue el-table实现自定义表头，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
el-table树形表格表单验证(列表生成序号)
10-15
这里的`form`是表单数据对象，`rules`是验证规则对象，`rows`属性对应`el-table`中的数据数组。在实际应用中，你需要根据业务需求定义具体的验证规则，例如： ```javascript const rules = { rows: [ { children...
vue修改Element的el-table样式的4种方法
10-14
在Vue.js中，Element UI库提供了丰富的组件，其中包括el-table，用于创建数据表格。然而，有时我们可能需要根据项目需求自定义el-table的样式。本文将详细介绍四种在Vue中修改Element UI el-table样式的有效方法。 ...
纯CSS固定表头内容滚动表格
01-20
绝对可用的纯CSS固定表头样式，适用多种浏览器，实例的方式展示，我们公司开发的应用软件就用的是这种固定表头的样式
bootstrap-table实现表头固定以及列固定的方法示例
10-17
主要介绍了bootstrap-table实现表头固定以及列固定的方法示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
首先，ElementUI的`el-table`组件通常通过`<el-table-column>`标签来定义每一列的属性，如`prop`、`label`和`width`等。例如，以下是一个静态的表格列定义： ```html <el-table :data="tableData" style="width: ...
表格【table标签】固定表头小技巧
vscode_js的博客
08-23 5981
近期开发一个小项目，由于项目本身比较小巧，所以也没考虑使用ui框架，项目纯手写html+css+js，由于页面的表格数据后台没有返回分页数据，导致整个表格集体向上滑动，故产品提出将table表格表头固定的小需求 尝试了很多种方法，thead不能单独脱离出来，否则整个table就瘫痪了，在无意中发现了一个合并表头的小技巧，完美解决当前的这个表头固定的小需求，下面让我们一起看一下展示效果吧： ...
bootstrap 的模态框中根据滚动高度距离冻结（固定）表头
liangf05的专栏
11-26 477
html部分 <div class="modal inmodal" id="alarmModal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog" style="width: 80%"> <div class="modal-content ani...
el-table 根据屏幕大小动态设置max-height来自适应表格的最大高度出现滚动条
热门推荐
fairyier
08-20 3万+
根据element-ui的文档，max-height的合法的值为数字或者单位为 px 的高度。无法识别响应式的css，如： max-height:calc(100vh - 40px) //或者 max-height:calc(100% - 40px) 受网友启发，实现思路： 通过js计算表格的最大高度，然后将高度数值传给el-table的max-height属性，上代码： html： ...
el-table max-height 无法设置百分比高度 导致滚动条出不来解决
qq_45498438的博客
06-03 1561
var div = document.getElementById("给自己组件设置个不会冲突的Id");el官方对这个属性的介绍是，绝对值。无法使用百分比值，对做小组件不是很友好。2.js获取元素高度，动态设置表格高度tableHeight。1.给自己组件设置个不会冲突的Id。
el-table 的fixed与max-height属性冲突
jiqiren1994的博客
02-24 951
问题描述 同时设置了这两个属性，然后固定列与最大高度功能都没有问题，但是却会输出以下的报错。明显是初始化的时候某个对象是null导致的。 查看源码 查看源码我们能看到这里有判断this.maxHeight是否为空，也就是我们是否有设置。有设置的话，会返回一个对象，其中会调用this.data.length。问题就是这里。初始化时this.data=null。 解决办法 对于要设置固定值的这种用法我建议取消fixed的设置。 对于是有设置变量绑定的这种，会在后续修改这个值的用法，我们可以 ...
el-table表头错位
08-22
el-table表头错位可能是由于表格设置了固定的高度属性（height），导致表头和表身出现错位。这种情况下，可以通过自适应表头的方式来解决表头错位的问题。 一种方法是使用el-table的指令v-tableFit，将代码复制到...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值