vue 解决固定列(fixed)后表格错位问题

最新推荐文章于 2025-04-14 17:51:04 发布

Tigers996

最新推荐文章于 2025-04-14 17:51:04 发布

阅读量5.2k

点赞数 4

分类专栏： Vue 文章标签： vue.js css3 前端

本文链接：https://blog.youkuaiyun.com/d1332508051/article/details/122493691

版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种解决表格最后一列使用fixed属性固定后导致错位的方法。通过为表格添加ref属性并调用doLayout()方法来刷新布局，解决了操作栏固定后的错位问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、表格最后一列(操作列)使用fixed属性固定后，导致表格发生错位现象
错位图
2、使用doLayout()刷新
在这里插入图片描述

//加ref属性
<el-table :data="table" ref="table" >

//强制渲染，解决操作栏固定后出现错位的情况
this.$nextTick(() => { 
   this.$refs.table.doLayout()
 })

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Tigers996

关注关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue2 - 解决 iView 表格组件 Table 滚动条无法拖动问题，表格固定列时滚动条失效导致拖拽没反应，把表格的某列固定后横向或纵向滚动条无法滚动的问题处理（有合计行或固定时导致失效无法拖曳）

王二红

07-14

3098

iview，vue，表格组件，table，滚动条，无法拖曳，拖动，无效，不生效，没反应，table固定列后,进度条无法拖拽iview固定列导致滚动条失效，也不报错，样式，无法覆盖，deep，iviewtable组件当固定高度后，fixed某一列会出现盖住滚动条的情况，滚动条始终位于可视区域的实现，详细解决方案，如何解决这个问题，样式覆盖依然报错，无法滚动，鼠标拖住不动，设置固定列，横向滚动条在固定列的位置上无法滚动的问题，vue2iview表格固定后滚动条无法拖动，解决iview带合计行表格固定列后滚动

vue组件中使用keep-alive后，element表格会错位的问题

qq_36238778的博客

05-20

1714

最近开始接手一个vue的后台管理项目，使用element-ui框架库进行搭建。项目开始根据不同的页面需求，给组件添加keep-alive <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> 之

参与评论您还未登录，请先登录后发表或查看评论

vue使用el-table左边固定横向列表根据接口返回渲染，页面样式错乱问题，以及table表格铺满

weixin_53124862的博客

10-18

305

就是设置的固定位置，可以直接用默认左边当然也可以自定义 fixed="right" 这里就使用的默认。但是我们的数据结构是左边第一列是固定的，其他列都是根据后端返回的数据来进行展示。这也是最近开发遇到的问题简单的记录一下，我们一起xx。页面的样式直接就变得非常混乱。接下来就要注意了，重点。啥也不说直接步入正题。

vue实现变态表格表头和列固定

sinat_41694829的博客

11-27

3372

复杂表格表头和列固定对于这个问题，相信网上也会有很多答案，很多插件或者是类似的案例，一下是我参考别人所写的案例自己改造的一个变态表格 1.实现的效果是，左右滚动，左边列固定，上下滚动，上边头部固定 2.要实现这个效果，具体方法是分为四个表格，用到了同步滚动的方法 3.反正很复杂，直接上代码吧 template: <template> <div class="table-scr...

记录el-table操作列使用fixed=“right“导致错位问题

最新发布

m0_69337169的博客

04-14

148

至少有一列设置min-width即可

解决 vue-element-admin 标签页切换时，table表格规定列错位问题

DevZYD的博客

07-12

1419

一、问题现象：首次加载固定列正常切换标签页到另外一个再切换回来，问题出现二、问题出现的原因分析：标签页路由设置为了缓存，meta.noChace = false, 在切换标签页时，路由为懒惰加载形式，导致页面组件被缓存，因高度为动态计算获取，从而出现固定列错位三、解决方法：在需要表格重载的vue文件加上vue生命周期函数 activated 执行表格重载即可 activated () { this.$nextTick(() => { this

vue element ui 使用el-table 组件的时候，列使用fixed，表格滚动后出现错位

weixin_42539372的博客

04-17

9151

表格滚动之后fixed列和其他列出现如下错位的情况在网上找了很多办法，doLayout也不起作用，给column设置：key="index+Math.random()"也不起作用,然后就用监听滚动条的方法写了： this.dom = this.$refs.multipleTable.bodyWrapper console.log(this.dom) this.dom.addEven...

【解决】Vue elementUI table表格列错位/滑动后切换每页显示数后错位/表格使用fixed后错位...

SummerGao

12-09

3891

table表格右侧列固定后，在切换页面之后，就会出现列错误的现象 <el-tab...

Ant design Vue表格使用fixed错位

QiGeS的博客

04-08

3930

问题：固定右侧两个操作框，但是因为有的表格内容过长导致错位现象解决方法： columns:[{ title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }, ellipsis: true, // 设置为true 可以隐藏超出部分 fixed: 'right' }] 在表格中插槽,鼠标移入通过tooltip文字提示显示所有内容 <

【VUE】elementUI 表格使用fixed 切换页面后列错位

SZnAl的博客

09-27

3534

【代码】【VUE】elementUI 表格使用fixed 切换页面后列错位。

Vue中el-table追加行后固定列滚动错位问题

qq_39753413的博客

07-12

3343

Vue中el-table追加行后固定列滚动错位问题偶然发现一个问题，但是并没有找到解决方案，自己调试了两个多小时终于解决。先贴出问题业务描述：在已查询完全部的符合条件的数据后，表格最下方提示“没有更多数据” 使用solt = “append” 追加div 这时候滑动到最底部，固定列错位了。......

el-table fixed固定列导致错位的解决方案

热门推荐

青年码农

07-27

2万+

点击上方“青年码农”关注回复“特效源码”可获取各种资料Element UI table组件可以通过设置fixed属性实现列的固定，但是在某些情况下会导致固定列的样式错乱，下面就总结下解决样式错乱实现方案1.doLayout（官方提供）对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。2.<el-table>标签上...

vue 解决移动端弹出键盘导致页面fixed布局错乱的问题

10-16

今天小编就为大家分享一篇vue 解决移动端弹出键盘导致页面fixed布局错乱的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

el-table表固定列错位

weixin_46155697的博客

07-01

1287

判断当前路由页面的name与表格所在页面name相同，且表格ref = “refsTable”时，对 Table 进行重新布局。2.页面配置table的ref=“refsTable”,并引用混入文件。3.特殊页面，直接在监听页面被激活函数调用。1.在混入文件中监听页面激活函数。

ant-design-vue table 表格组件错位解决

东扯葫芦西扯瓜——前端小菜鸟的博客

04-23

1万+

ant-design-vue table 表格组件错位解决原因查找错位消失机制解决思路试验一试验二解决的背后 table组件错位问题。 table组件错位，不管是用element-ui的table组件，还是ant的table组件，只要使用了列的fixed属性，在第一次进入页面时就会出现。原因查找经检查dom发现使用fixed后，table组件实际由3个table组成，左边一个，中间一个，右边一个。如果中间表格有某一列的内容有换行或者特殊内容等，，这会导致表格实际高度比没有特殊内容要高。三个表格

VUE表格显示错位的两种解决思路

m0_58874148的博客

03-14

2864

两种思路解决vue表格显示错乱问题

vue element 表格使用fixed固定列后切换菜单时错位问题

我真的很不错的博客

03-03

1813

开发时由于列表数据项过多需要固定操作列，于是在操作列上加了fixed=“right”。一开始没什么问题，但是在切换菜单时出现了错位现象后来找到问题，由于vue element-admin 默认是启用路由缓存的，但是element的固定列是动态计算高度的，当你第一次进入页面时并没有问题因为element已经计算好了高度，但是由于切换菜单后缓存的问题第二次进入是没有计算的，这就导致了错位现象。百度的话很多解决方式，大多都是让你获取数据时doLayout，但是我这个问题并没有获取数据。是由于keep-al

element el-table表格使用动态表头加 fixed固定导致表格布局错乱

红烧咸咸鱼

10-16

512

element el-table表格使用动态表头加 fixed固定导致表格布局错乱

el-table固定列错位问题

03-19

### 关于 Element-UI 中 `el-table` 固定列错位问题的解决方案 #### 1. 背景分析当使用 `el-table` 的固定列功能时，可能会遇到样式高度错乱或表头错位的问题。这通常发生在以下场景中： - 表格存在滚动条时。 - 使用了 `fixed="left"` 或 `fixed="right"` 属性来固定某些列。这些问题的根本原因是 `el-table` 在实现固定列时会克隆一份表格结构[^2]，并将其放置在不同的 DOM 容器中。这种机制可能导致布局计算错误，尤其是在动态加载数据或窗口大小发生变化的情况下。 --- #### 2. 解决方案以下是几种常见的解决方法： ##### 方法一：通过 CSS 修改滚动条影响的高度不足问题可以通过调整 `.el-table__fixed-right` 类的样式来修复高度不足的问题。例如，在全局样式文件中添加如下代码[^3]： ```css .el-table__fixed-right { height: auto !important; } ``` 此方法适用于因滚动条导致的最后一列按钮显示不全的情况。 --- ##### 方法二：强制重新计算表格布局在数据更新后调用 `doLayout()` 方法可以确保表格重新计算其内部布局。具体操作方式如下[^4]： ```javascript this.data = newData; // 更新表格数据 this.$nextTick(() => { if (this.$refs.myTable && this.$refs.myTable.doLayout) { this.$refs.myTable.doLayout(); } }); ``` 上述代码中的 `$nextTick` 是 Vue 提供的一个工具函数，用于等待 DOM 更新完成后再执行回调逻辑。这样可以有效避免由于异步更新引起的布局错乱问题。 --- ##### 方法三：修正滚动条宽度带来的偏差如果问题是由于横向滚动条的存在而导致的表头错位，则可以在全局样式中增加以下规则： ```css .el-table--scrollable-y .el-table__body-wrapper.is-scrolling-right { width: calc(100% + 6px); /* 6px为竖向滚动条宽度 */ } ``` 该方法通过对 `.is-scrolling-right` 类进行微调，补偿了滚动条占用的空间，从而解决了表头偏移的现象。 --- ##### 方法四：监听窗口尺寸变化对于动态调整浏览器窗口大小引发的布局问题，建议绑定事件监听器以实时触发 `doLayout()` 方法。例如： ```javascript mounted() { window.addEventListener('resize', this.handleResize); }, beforeDestroy() { window.removeEventListener('resize', this.handleResize); }, methods: { handleResize() { if (this.$refs.myTable && this.$refs.myTable.doLayout) { this.$refs.myTable.doLayout(); } } } ``` 这种方法能够应对用户缩放窗口或其他外部因素引起的内容重绘情况。 --- #### 总结以上四种方法分别针对不同类型的错位现象提供了针对性的解决方案。实际应用中可以根据具体情况组合多种手段以达到最佳效果。 ---