第三十三：element UI 表格的fixed定位右侧操作栏错位问题

已于 2023-10-18 10:41:26 修改
阅读量528 收藏
点赞数
文章标签： ui javascript vue.js elementui
于 2023-10-18 10:34:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maliyao4233/article/details/133900511
版权
本文介绍了遇到表格错误展示时的解决方案，包括使用官网推荐的doLayout方法以及在table中添加ref（如multipleTable8），特别提到了在处理tab栏切换和数据接口中的应用。还指出一个常见陷阱：确保在设置width时正确使用px单位以确保显示效果。
摘要由CSDN通过智能技术生成

❗️错误展示如图👇：

在这里插入图片描述

✅解决办法1：用官网提供的方法doLayout

在这里插入图片描述

✅在table里加ref=“multipleTable8”（ref=“随意定义”）因为我是tab栏切换，所以我直接写在tab栏目点击切换里调用了方法。如果没有切换只是获取数据展示的话，可以直接写在查询数据接口里边

在这里插入图片描述
在这里插入图片描述

❗️❗️踩坑点：如果没有生效看看是否在width里边加个px,需要去掉

在这里插入图片描述

路遥开着敞篷在兜风
关注
“element-ui“: “^2.15.14“+“vue“: “^2.7.16“版本表格el-table固定列后，表格宽度放大100%后进行缩小造成表格右侧与左侧行矬位的问题研究
yuyuelong
03-15 266
经细心观察，滑动条到左侧时比较短，应该是部分被固定列遮挡造成的上下矬位。，去掉高度可以解决，但是我这块是需要动态处理表格高度，所以不能去掉；表格设置了高度同时行数据超过当前页面，也就是说表格右侧出现了滑动条。其一，表格不要设置高度则不会出现该问题，因为我这块是动态高度；因为数据私密性，不能录视频，还请见谅！现进行研究doing。触发该问题的条件是，
【element ui】问题集锦
Beam
03-29 2131
现象： 在el-dialog弹出框中使用到el-table列表时，右侧操作栏设置了fixed=“right”，第一次打开弹框正常，关闭后再次打开，发现操作栏全都往下移动了一行，导致表格行错位。 解决： 官方文档有提供方法doLayout，但没明确什么情况下使用，或许此时就能用。 监听data变化后，需要重新渲染el-table时，调用doLayout该方法即可。 代码： watch: { '$attrs.data': { handler (val) { this.$refs.com
【VUE】elementUI 表格使用fixed 切换页面后列错位
SZnAl的博客
09-27 3296
【代码】【VUE】elementUI 表格使用fixed 切换页面后列错位。
elementui切换页面 table操作栏错位解决办法
weixin_44363139的博客
06-28 1169
elementUI table操作栏错位 尤其是可以左滑的页面
element-ui el-table fixed踩坑
最新发布
weixin_50805614的博客
07-15 312
el-table中fixed导致的问题
element-ui Table组件使用fixed=“right“后显示错位问题
qq_61869009的博客
08-12 604
首先在table表格加上ref，让后在页面mounted调用 table的doLayout方法。
Element-UI固定表单的操作列按钮时出现错位
weixin_47035997的博客
12-06 1154
element-ui的表格在使用fixed标签时出现了错位的问题
解决element动态表头操作栏fixed导致表格错位问题
yuryS的博客
11-13 375
element表格fixed错位
ElementUI表格错位问题
qq_45788135的博客
07-03 1018
tableLayout 属性解决表格错位问题
Element UI 动态表格踩坑指南
LGEC_的博客
06-14 355
Element UI 动态表格踩坑指南，可避免出现表格表头、内容错位问题。
el-table fixed固定列导致错位的解决方案
热门推荐
青年码农
07-27 1万+
点击上方“青年码农”关注回复“特效源码”可获取各种资料Element UI table组件可以通过设置fixed属性实现列的固定，但是在某些情况下会导致固定列的样式错乱，下面就总结下解决样式错乱实现方案1.doLayout（官方提供）对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。2.<el-table>标签上...
vue+element遇到的问题
GTbond的博客
12-30 781
用lang=“scss” 写样式，修改element的默认样式，用 ::v-deep 样式穿透 <style lang="scss" scoped> ::v-deep .el-input-group__append { background-color: #5094ff; border: 1px solid #5094ff; } </style> 用lang=“less” 写样式，修改element的默认样式，用 /deep.
elementui table 右侧操作栏 fixed错位问题
weixin_41955516的博客
05-25 1866
elementui table 右侧操作栏 fixed错位问题 解决办法重新计算table布局 在这里插入代码片/* 监听table数据对象 */ watch: { tableData(val) { this.doLayout(); } } /* 重新渲染table组件 */ doLayout(){ this.$nextTick(() => { that.$refs.table.doLayout() })
vue+elemnetUI el-table表格中，一个页面动态展示两个table时，内容、操作栏按钮错位问题，el-tag标签可根据对应值改变样式【适用于二元值】
zujiasheng的博客
11-03 2082
问题描述①： 在一个页面中表A展示如下 切换到表B，内容、操作栏按钮错位 解决问题①： 解决方式一：在表A的el-table里面，增加一个关键字key，唯一标识下即可 <el-table :data="tableData" border style="width: 100%" height="600" key="index1"> 解决方式二：在第一个表，表A的操作栏，操作栏处的template标签里面，新增一个v-if条件，控制按钮隐藏显示。 问题描述②：
解决 element ui表格最右侧定位 滚动发生错位
m0_63464623的博客
06-03 206
【代码】解决 element ui表格最右侧定位 滚动发生错位。
elementUI中el-table表格的表头样式错位
keke11211的博客
08-20 1009
版本：element-ui 2.12.0 问题描述： 使用elementUI的el-table表格组件时，表格高度定高，内容过多时右侧会出现滚动条，然后就会出现如下图所示的列错位的样式： 解决办法： 在网上也找了好多方法，试了好多改样式的方式，都没有什么用，没有达到效果，最后还是采用js的 doLayout 方法，在获取到数据后重绘表格，实现了想要的效果。代码很简单，如下： templete中给表格设置 ref 属性： <el-table :data="table" ref=
elementUi——table 设置列为fixed后，页面切换时导致错位问题(亲测有效)
yehaocheng520的博客
06-24 6641
今天测试给我提了一个布局问题：效果图如下： 他的测试方式比较奇葩，是不停的切换上面的标签页，然后就出现了上图的错位问题。 百度后发现也有其他人提到这个错位问题： 不过他们的错误基本是表格数据改变时，表格错位。 所以解决办法是： 思路就是：watch监听表格数据的变化，如果变化，则重新渲染表格。 watch: { tableData(val) { this.doLayout(); } }, methods:{ doLayout() { this.$next
【解决】Vue elementUI table表格 列错位/滑动后切换每页显示数后错位/表格使用fixed后错位...
SummerGao
12-09 3459
table表格右侧列固定后，在切换页面之后，就会出现列错误的现象 <el-tab...
关于Element-ui中el-table出现的表格错位问题
weixin_45786429的博客
06-13 4426
在使用element-ui中的el-table时，我们经常会用到fiexd属性，而使用了fixed属性之后，就会容易在各种场景出现表格错位的问题。在使用element中table组件的时候，有时候在部分不兼容的浏览器中，会出现以下表头和内容错位的情况。3.2 如果使用了keep-alive，可以在activated里执行doLayout方法。3.3 也可以通过监听路由，在watch里执行doLayout方法。附：解决element中el-table中表头和内容错位的方法。1、数据更新后出现的错位问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值