el-table 表格错位,固定列滑动错位

问题: 表格存在错位 表头表格内部未对齐(如图)
在这里插入图片描述

解决:
① 方法1
给表格加上key 确保表渲染的唯一性
(new Date().getTime(),Math.random()) 时间戳 随机数 唯一值给key

<el-table
      :data="tableData"
      :key='Math.random()'
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
</el-table>

②方法2
element 官方给出的解决办法是使用doLayout

<el-table
      :data="tableData"
      ref='table'
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
</el-table>

使用doLayout重新加载一下table就好了

watch:{
	tableData:{
		deep:true,
		handler:function(){
			this.$nextTick(() => {
               this.$refs.table.doLayout()
             })
		}
	}
}

如果使用doLayout 有固定列还是存在上下错位(固定列相连的字段建议不要给width),滚动条的影响,请尝试下面css

::v-deep.el-table .el-table__fixed-right .el-table__fixed-body-wrapper .el-table__body {
      padding-bottom: 10px!important;
}
### 解决 `el-table` 左侧固定下沉导致错位的问题 对于 `el-table` 中左侧固定出现的样式错位问题,通常是因为表格或其父级容器的状态变化(如显示/隐藏),或是由于浏览器渲染机制引起的。官方提供了一种通过重新布局来解决问题的方法。 #### 方法一:调用 `doLayout()` 方法 当发现固定发生错位时,在适当的时间点调用 `Table.doLayout()` 可以使表格重绘并修正位置错误[^1]: ```javascript this.$nextTick(() => { this.$refs.yourTableRef.doLayout(); }); ``` 这里假设 `yourTableRef` 是给 `<el-table>` 设置的 `ref` 属性值。 #### 方法二:调整 CSS 样式 如果上述方法未能完全解决问题,则可以尝试修改一些默认的CSS样式。特别是针对有滚动条的情况下,可以通过自定义类名的方式增加额外的空间补偿,防止因滚动条的存在而引发的计算误差[^4]: ```css .el-table--scrollable-y .el-table__body-wrapper.is-scrolling-left { width: calc(100% + 6px); /* 调整这里的像素数以适应不同宽度的滚动条 */ } ``` 需要注意的是,不同的操作系统和浏览器可能会有不同的滚动条尺寸,因此建议测试多种环境下的表现,并相应地微调这个数值。 另外,确保整个页面结构合理设计也很重要,比如避免不必要的绝对定位、浮动等可能导致子元素脱离文档流的操作,这些都可能是造成最终视觉效果异常的原因之一。 #### 方法三:优化 DOM 结构与加载逻辑 有时,DOM 的复杂度以及 JavaScript 执行顺序也会影响 `el-table` 渲染的结果。确保数据初始化完成后再展示表格组件;同时减少不必要的嵌套层次,保持 HTML 结构简洁明了有助于提高兼容性和稳定性。 最后提醒开发者们注意版本更新带来的潜在影响,随着 Element UI 版本迭代,部分 API 和行为特性可能发生改变,所以最好查阅最新的官方文档获取最新指导信息。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值