el-table 的fixed与max-height属性冲突

最新推荐文章于 2024-08-20 17:58:21 发布
最新推荐文章于 2024-08-20 17:58:21 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： web 文章标签： 表格组件 maxHeight 初始化 空引用 解决方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiqiren1994/article/details/114023068
版权

问题描述

同时设置了这两个属性，然后固定列与最大高度功能都没有问题，但是却会输出以下的报错。明显是初始化的时候某个对象是null导致的。
在这里插入图片描述

查看源码

查看源码我们能看到这里有判断this.maxHeight是否为空，也就是我们是否有设置。有设置的话，会返回一个对象，其中会调用this.data.length。问题就是这里。初始化时this.data是空的所以就会报错。
在这里插入图片描述

解决办法

查看我们对table 设置的绑定值，我们设置的初始值是null，所以我们修改这个值为一个空数组[]即可。

jiqiren1994
关注
专栏目录
el-table 使用show-summary并指定height解决合计不显示后底部会出现空白区域
baidu_41682543的博客
03-14 1247
el-table 使用show-summary并指定height解决合计不显示后底部会出现空白区域
el-table 改数据源的值但是不刷新
程序员大包包的博客
11-26 1万+
问题：公司项目中使用Vue+elementUI，在使用axios加载数据的时候发现el-table里的数据没有刷新出来 页面代码： <!--绑定数据源--> <el-table :data="form.goods" ...
el-table 设置最大高度且能刚好撑满
weixin_45049852的博客
10-09 1184
90vh视口高度的90%自行调整即可。
element el-table计算最大高度
qq_45873476的博客
07-29 304
根据当前屏幕的可视高度(window.innerHeight) - 表格顶部距离可视高度顶部的距离 = 剩余高度 (可适当手动添加底部安全距离(bottomPadding))
【踩坑日记】el-table的属性max-height导致内容超出后不滚动
最新发布
baidu_34861695的博客
08-20 401
简单来说是elementUI源码里面转换高度的方法parseHeight，无法处理calc(100vh-20px)这种数据，网络上其他文章的解决方式改动量都不小，要么是继承组件魔改方法，要么是重写样式，但是又会导致fixed失效，要么就是照着改了不小。其实我们只要不传字符串数据，max-height固定传Number就行了，px也不要加。
el-table中设置max-height属性使其固定表头
BADAO_LIUMANG_QIZHI的博客
02-08 2186
场景 若依前后端分离版本地搭建开发环境并运行项目的教程： 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客_若依前后端分离文档 在上面搭建项目的基础上，el-table显示列表以及选择20条显示时的效果如下 要实现当切换每一页的条数时，表头固定的效果如下 注： 博客：BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主 关注公众号 霸道的程序猿 获取编程相
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
el-table表格动态设置最大高度 高度根据窗口可视高度大小改变自适应
misschengispink的博客
09-13 4962
由于表格内容过多，如果不给高度限制，每页100条数据的情况下，去操作底部的分页或者其他功能都需要划到数据最底部操作，用户体验性较差。解决方法是让表格一屏展示，超出部分滚动展示。
el-table fixed 后滚动条不能使用
05-25
如果您使用 Element UI 的 `el-table` 组件，并且在表格中设置了 `fixed` 属性，...3. 如果上述方法都无法解决问题，您可以尝试使用 `max-height` 属性代替 `height` 属性，或者使用第三方库来替代 `el-table` 组件。
简单封装el-table表格组件 支持 render 动态渲染
weixin_44180190的博客
03-31 2769
简单封装el-table组件 使用配置的方式生成想要的组件效果 额外实现了多级表头 自适应表格高度 支持使用el-table 的api 支持使用render函数
el-table-column fixed 后滚动条不能使用
05-25
另外，如果你在使用 fixed 属性后还想要表格自适应页面宽度，可以给 el-table 组件添加 `max-height` 和 `min-width` 样式，示例代码如下： ```html <el-table :data="tableData" style="width: 100%; overflow: ...
element table组件根据屏幕大小动态设置max-height属性设置表格最大高度，但设置百分比或者响应式不生效的问题
二三的博客
12-06 1万+
element的table表格组件有一个max-height属性，可以设置table的最大高度，但是当我设置这个属性的值为百分比或者响应式的时候，却没有生效，如下所示。 max-height:calc(100vh - 40px) //或者 max-height:calc(100% - 40px) 这是因为element-ui的文档，max-height的合法的值为数字或者单位为 px 的高度。无法识别响应式的css。 解决方法有以下几种： 首先列举出代码： 首先设置table组件的ref属性，以及设.
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高度根据内容自适应且设置最大高度
hahaha921的博客
03-20 1720
el-table高度根据内容自适应且设置最大高度
【ElementUI】el-table 设置 max-height 后，当表格数据未超过高度时，表格右侧会出现空白列的解决方案
一个努力学习的程序猿
01-12 9193
今天在开发过程中，遇到了一个有点棘手的问题。棘手的原因是，我搜索了一圈，结果没发现解决方案，甚至没看到几个遇到相同问题的朋友。这让我感到十分疑惑，作为一个 CV 程序员，难道是我参照文档用的方法不对？竟然还有百度找不到的解决方案？那没办法了，用自己的一根头发作为代价，自己进行摸索吧。问题如下： 在使用 ElementUI 的 el-table 时，当我为其设置了一个 max-height 后，如果数据量过大，确实超过了给定的高度，那么用起来和文档还真就是一个效果。但是当这组数据，在没超过 max-heig
el-table max-height 无法设置百分比高度 导致滚动条出不来解决
qq_45498438的博客
06-03 1821
var div = document.getElementById("给自己组件设置个不会冲突的Id");el官方对这个属性的介绍是，绝对值。无法使用百分比值，对做小组件不是很友好。2.js获取元素高度，动态设置表格高度tableHeight。1.给自己组件设置个不会冲突的Id。
【Vue】Table组件动态最大高度
qq_40205510的博客
05-30 1100
分别表示页面顶部、底部和页脚的高度，以及可能存在的其他元素高度。在实际项目中，这些值可能需要根据实际情况进行调整。在使用Vue框架开发项目时，经常会遇到需要调整组件尺寸以适应不同屏幕大小或窗口尺寸的需求。获取当前窗口的内部高度，然后减去表格上方、下方和页脚的高度，得到表格的最大高度。事件监听器，以便在窗口大小发生变化时重新计算表格的最大高度。组件，其最大高度会根据窗口大小的变化而动态调整。组件动态设置最大高度，以实现响应式布局。变量，并在组件挂载时添加一个。首先，我们需要在模板中为。
vue项目 解决el-table自适应高度,vue页面不显示多条滚动条，超出的部分让el-table内部出现滚动条（推荐使用第二种解决方案；TAdaptivePage 组件新增左右分栏布局）
wocwin的博客
04-24 2万+
vue项目 解决el-table自适应高度,vue页面不显示多条滚动条，超出的部分让el-table内部出现滚动条（推荐使用第二种解决方案）
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值