element-ui的el-table动态修改表格展示列，导致表格高度塌陷的问题

最新推荐文章于 2025-02-18 10:40:53 发布
最新推荐文章于 2025-02-18 10:40:53 发布
阅读量1k 收藏 1
点赞数 2
分类专栏： 错 文章标签： vue.js javascript 前端 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42702443/article/details/129875305
版权

解决办法：在表格数据更新后对el-table进行重载

el-table中添加 ref=“tableRefName”

  updated() {//强制刷新组件
    this.$refs['tableRefName'].doLayout()
  }
Vue2+Element-ui实现el-table表格自适应高度
cnsv的博客
06-12 1214
vue2+elementUI table表格自适应页面高度
elementUI中 el-table 表格单元格非固定层级嵌套导致的高度自适应及单元格匹配对齐
weixin_39969385的博客
10-11 2078
遇到一个问题，ElementUI 下 el-table 表格单元格的高度自适应问题，及子单元格的层级对齐问题 要求实现为这个样子 图片上可以看到有的单元格内嵌套的是多条数据，且不固定条数，例如评价维度列，为实现图二的效果，我这边对单元格及其子元素进行了定位处理，其子元素（渲染出来的div.cell）设置最小高度为100%，但是这种情况会导致高度塌陷，于是我为评价维度列的单元格子元素设置了取消定位，其他单元格子元素正常定位，这里这么操作是为了把单元格撑开（el-table渲染的时候行的高度默认跟随
element ui el-table动态生成表头(v-for/v-if)导致的高度塌陷（少一截）的解决办法
kanggege00的博客
04-19 1416
element ui el-table动态生成表头导致的高度塌陷（少一截）的解决办法
el-table动态表头生成时会出现高度塌陷问题
weixin_42387630的博客
02-18 210
el-table动态表头生成时会出现高度塌陷问题。
el-table动态加列（el-table-column），el-table__body-wrapper高度塌陷问题
qq_36294950的博客
02-23 630
element-ui的el-table动态修改表格展示列，table高度变小问题
yangchuangxyz的博客
12-26 685
element-ui的el-table动态修改表格展示列，table高度变小问题
el-table动态修改表格展示列，table高度变小问题
QAWSASD的博客
02-26 572
解决el-table动态展示列导致表格样式错乱
el-input输入时导致el-table-column塌陷
08-17
在Vue.js的Element UI库中，`el-input` 和 `el-table-column` 的结合有时候可能会遇到一个问题，即当用户在输入框(`el-input`) 中输入内容过长，而该输入框又作为表格 (`el-table`) 的一列 (`el-table-column`) 内容...
el-table表格错位
02-19
### 解决 Element UI 中 `el-table` 表格列错位的方法 #### 方法一：调整 CSS 样式 对于因滚动条引起的表头与内容不对齐问题，可以通过修改全局样式来修正。具体来说，在存在垂直滚动条的情况下增加额外宽度可以...
el-dialog头部空白
最新发布
04-12
1. **默认样式问题**：Element UI的el-dialog组件可能有默认的内边距（padding）或外边距（margin），尤其是在头部（header）和内容（body）之间。如果用户没有正确覆盖这些样式，可能导致空白出现。 2. **内容区域...
elementui 表格自适应
01-10
当使用Element UI的表格组件时，如果希望表格能够根据内容自动调整列宽，则需要注意`width`属性的应用。若所有列均设定了固定宽度，那么即使尝试其他方式来使表格整体自适应容器宽度也会遇到困难[^1]。 对于未指定...
el-table动态显示列高度塌陷问题以及非固定列底部滚动条无法对齐的问题
karlif的博客
07-28 1992
el-table动态显示列高度塌陷问题以及非固定列底部滚动条无法对齐的问题
el-table使用动态高度导致的下陷问题
weixin_45874401的博客
11-20 511
一个半路出家的前端开发菜鸟技师的奇葩bug汇总集。各位大佬就当个乐子看看
elementUI 的el-table中切换tbs出现设置flexd栏高度塌陷
weixin_42400319的博客
06-08 386
当两个页面切换（display：none到block，而出现这个问题的表格中是有列合并的操作）会导致页面回流，由于elementUI的表格高度是计算得出，发现这个表格的高度以及宽度与之前正常渲染的都发生了改变，这样就导致了固定列（el-table__fixed-body-wrapper）位置直接计算不准确导致塌陷。updated钩子中使用el-talbe自带的doLayout方法。调用此方法后table组件会重排。
element 动态设置el-table 高度
weixin_63443072的博客
08-12 906
这里使用vue2来演示，如果你使用的是vue3,那么也相信你也可以转化成你熟练的vue3代码吧。首先不管你的element ui 还是element plus，这个都是通用的。el-table 组件是自带一个属性 height 可以传值的，那么就好办了。
elementUi 动态生成table表头和固定列表格塌陷的问题
txf666的博客
12-07 3193
vue中elementUi 动态生成table表头和固定列表格塌陷的问题 事由：项目中很多时候都会用到自定义表格动态渲染出需要的表头名称，特别是elementUI中table需要使用到固定列机及其会出现表格塌陷的问题。 表格里面是有数据的，但是表格的高度塌陷了，导致内容被遮挡了。 解决：需要我们在updated生命周期中使用doLayout()重新渲染表格 原因：数据从后端拿过来，数据太多还没来得及渲染完表格的高度就被固定死了，导致了表格塌陷的问题，所以我们得在数据更新完之后再重新渲染一下表格。 ...
ElementUI的表格列过多时，动态渲染列滚动条无法显示
qq_38693333的博客
08-13 1674
ElementUI的表格列过多时，动态渲染列滚动条无法显示，此时可以使用doLayout函数来触发重新刷新该表格，用法如下： this.$refs.xxx.doLayout() 即可解决改问题。
动态改变表格高度
qq_59944654的博客
07-26 262
需求：当页面搜索区域元素高度发生改变时，内容区域表格的高度自动调整高度，以及当页面缩放时，表格高度也随之改变。
【Vue+ElementUI】el-table动态高度设置及表格内容错乱对不齐
sunshineTing2的博客
04-28 4461
el-table动态高度设置及表格内容错乱对不齐
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值