elementUI表格，动态渲染列，导致表格高度变化，横向滚动消失

已于 2023-08-31 16:52:24 修改
阅读量765 收藏 3
点赞数 1
文章标签： css 前端 elementui
于 2023-08-31 16:44:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36539696/article/details/132606582
版权

表格初始化动态渲染的时候
在这里插入图片描述
初始渲染一切正常，滚动条都在

条件查询后
在这里插入图片描述
表格body部分高度缩了

组件专门设置了table高度，但是这个高度管不了table-body的高度，而是整个table的高度
如果强行对table-body进行深度样式绑定，会导致x轴滚动条消失

解决办法：
vue生命周期updated对table进行更新

  updated() {
    this.$refs.mainTable.doLayout()
  },

table组件源码中有对doLayout的详解
在这里插入图片描述
在这里插入图片描述
主动调用doLayout就会更新table组件的高度

STARSHOME火星
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
12-30
先上完成的效果图：列是根据查询结果增加的  数据格式：  表头的数据取出： data.data.forEach(element => { this.thead.push({ 品名: element.品名, 面取数: element.面取数, LOTNO: element.LOT }); 　...
Element Ui 中表格设置max-height滚动条失效
zhuo123110的博客
12-27 4287
为了是表格动态自适应页面高度，所以给表格设置了max-height属性，但是纵向滚动条消失了
【elementplus】解决el-table设置固定高度后，横向滚动条消失的问题
bbt953的博客
07-03 2888
消失的原因：因为我给el-scrollbar__bar设置了position: static，覆盖了它原本的样式position: absolute。解决：把position: static删掉。
【Vue+ElementUI】el-table动态高度设置及表格内容错乱对不齐
最新发布
sunshineTing2的博客
04-28 2078
el-table动态高度设置及表格内容错乱对不齐
element-ui表格固定操作列错位以及滚动条不显示问题
weixin_43496091的博客
04-10 893
【代码】element-ui表格固定操作列错位以及滚动条不显示问题。
eltable行高变化后，丢失滚动条
czp555的博客
08-28 621
1.弹窗中动态增加内容的el-table标签上添加了height属性超出未显示滚动条,行内有input 或textare高度变化时，表格内部高度变化了，但是表格实际高度并没有变高。2.修改 @input="$refs.myTable.doLayout()"
vue，ts 自定义el-table 动态表头显示隐藏
hahehes的博客
09-18 884
由于业务需求，最近客户需要一个能动态显示表格列的内容，看了网络上一些前辈写的内容感觉过于复杂，所以自己重构了一版，具体思路如下： 传入表头数据 初始化初始表头数据 选择/取消时触发回调方法
element-ui 表格滚动栏 无效 失效 element-table 滚动栏失效 element表格滚动栏失效 解决 element -表格 滚动栏 不见失效 解决 表格滚动栏失效
半只
07-19 5930
滚动栏只有细细的一条线，根本看不见， 这个问题不知道是怎么出现的，有帖子说是因为固定列造成的， 有帖子说是 列文字溢出造成的。插件，因为这个插件套的就是 element-table组件，不需要额外代码，原装使用。可是这些问题我都没有出现，一开始项目是有滚动栏的，不知道从什么时候开始就变没了。不然 当前页面样式无法穿透到 element表格源css。我使用的比较多的就是。
element-ui中table不显示滚动条
MR_SNAIL的博客
11-15 5819
.el-table { .el-table__header-wrapper th { background-color: #f0f1ff; } .el-table__body-wrapper::-webkit-scrollbar { /* width: 0;宽度为0隐藏 */ width: 0px; height: 0; } .el-table__body-wrapper::-webkit-scrollbar-thumb { border-radi
解决layui数据表格table的横向滚动条显示问题
12-11
ps：这个问题fly社区给出的解释是：table 列宽自适应出现横向滚动条的几率一般是比较小的，主要原因是 table 的渲染有时会在浏览器纵向滚动条出现之前渲染完毕，这时 table 容器会被强制减少滚动条宽度的差（一般是 ...
vue elementUI table表格数据 滚动懒加载的实现方法
01-19
vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验， 这个时候常常有两种方法处理， 1、分页，如下   2、如果我不想分页，又想在一页...
Element-ui表格的列隐藏显示会使表格头数据错乱或者表格头样式变大
梦想成为全栈的切图仔
09-26 8194
在使用Element-ui 框架的时候，相信过多的人会遇到一系列不属于技术范围的问题，甚至都没见到过，其实这类问题解决起来也是很好解决的。 只需要用心再看一遍框架就好。 今天就来给大家说一说使用element框架的时候，表格头为什么会错乱或者变大。 <el-table-column v-if="TheCustomColumn1 == false && CustomColumn......
el-table组件fixed引起的表格布局错乱问题
千里之行，始于足下！
12-17 4023
背景：最近做项目时使用el-table组件，在使用fixed布局并设置height的表格遇到以下的问题： 1、发现横向滚动条很难拉动 2、进行固定列时出现了布局错乱，错乱效果如下图（参保人基础信息 列使用了fixed进行固定）： 解决： /*解决fixed引起的错位问题*/ .el-table{ overflow: auto; } /*解决横向滚动条拉不动问题*/ .el-table__header-wrapper,.el-table__body-wrapper,.el-table__footer-w
css增加横着滚动条_CSS 设置滚动条样式的实现
weixin_39560604的博客
12-20 1121
webkit滚动条样式重置1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。2、scrollbar corner为横向和竖向的交叉角区域3、resize用来设置滚动条的交汇处上用于拖动调整元素大小的小控件组成结构图如下：一旦发现滚动条的自定义样式，浏览器...
antdesign-vue table设置固定表头和列（就是横向滚动+纵向滚动）后滚动条消失（项目框架用的是snowy小诺）
qq_46490956的博客
09-04 2043
antdesign-vue table设置固定表头和列（就是横向滚动+纵向滚动）后滚动条消失（项目框架用的是snowy小诺）
解决el-table滚动条错位问题（完美级）
Lora_0925的博客
04-20 5550
滚动条 创建一个js文件，并在main.js引入: import Vue from "vue"; Vue.directive("tableFit", { //指令所在组件的 VNode 及其子 VNode 全部更新后调用。 componentUpdated(el, binding, vnode) { setTimeout(() => { adjustColumnWidth(el, vnode); }, 0) },
el-table中table-col动态更新后固定栏高度问题
吕小威的博客
04-18 827
好久没写了，记录一下一个el-table更新问题。 动态更新el-table中table-col后固定在右侧的操作栏高度显示异常，如下图 上图为更新前，下图为更新后 刷新后就正常了，所以推断是没有同步更新造成的，解决方法如下： <el-table :key="elTableKey" // 给el-table绑定key值 ></el-table> <template v-for="item in tableCol"> // 表格列是动态渲染的 &lt
element-plus Table组件更新数据后表头消失的解决方法
oi
08-21 3251
table组件表头突然消失
vuerouter 中使用 elementui 表格无法渲染
02-21
使用 elementui 表格无法渲染可能是因为 vue-router 可能会阻止 elementui 表格的渲染。建议你检查 vue-router 的配置，确保它没有阻止 elementui 表格的渲染。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

STARSHOME火星

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

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

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

打赏作者

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

抵扣说明：

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

余额充值