el-table-fixed滚动条被遮挡与数据列错位解决方案

最新推荐文章于 2024-10-09 15:30:54 发布
最新推荐文章于 2024-10-09 15:30:54 发布
阅读量2.9k 收藏 3
点赞数 3
分类专栏： elementui vue 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44328764/article/details/120862367
版权
本文介绍了在使用ElementUI的el-table组件时遇到的两个问题：1) 滚动条被固定列遮挡，导致无法正常拖动；2) 页面大小改变时，数据列出现错位。针对这些问题，提出了相应的解决方案，即在数据请求返回后调用列表的doLayout方法来修复列的布局。
摘要由CSDN通过智能技术生成

1. 滚动条被固定列遮挡导致无法拖动

 >>>.el-table__fixed-right, >>>.el-table__fixed {
   
        height: auto !important;  
        bottom: 6px !important; // 6px为预留的滚动条高度
最低0.47元/天 解锁文章
喝咖啡还是泡茶
关注
专栏目录
el-table 固定表头和固定列之后 由于滚动条导致的 表格线错位
qq_45915537的博客
07-05 3097
table 直接调用tabelRevise函数即可 tableRevise(this.$refs.dirctTable.$el) //修正el-table错位 function tableRevise(table) { const tableWrapper = table.querySelector('.el-table__body-wrapper') const tableBody = table.que...
elementui table固定列的时候，滚动条被遮挡无法拖动
qq_36711388的博客
06-30 2835
elementUI的el-table左固定列把底部滚动条覆盖导致拖动无效，是因为左边固定表格部分高度覆盖了左边表格的滚动条高度，因此无法拖动，这时候我们只需要改变固定表格区域的高度。 代码如下： <style lang="scss" scoped> .el-table { /deep/.el-table__fixed { height:auto !important; // 此处的important表示优先于element.style bottom:17px
el-table(vue2中）滚动条被固定列盖住
qq_30306717的博客
10-26 2509
el-table(vue2中）滚动条被固定列盖住 修复
el-table 有滚动时表头表格错位
xzb的博客
11-11 879
el-table 表头表格错位
el-table fixed固定列导致错位的解决方案
最新发布
weixin_44175192的博客
10-09 839
但是我的项目是动态表头的，没办法确定fixed列的相邻列。因此我用了一种取巧的方案，就是用doLayout方案，可以解决横向滚动的不对齐的问题，但是还有个问题就是如果列比较少（每个列都有宽度），表格不撑满整个页面。Element UI table组件可以通过设置fixed属性实现列的固定，但是在某些情况下会导致固定列的样式错乱，下面就总结下解决样式错乱实现方案。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。这个是网上一个大神经过一系列排查和非人类的试探后，总结出来。
el-table fixed 滚动错乱
_____青絲
08-04 366
el-table fixed 滚动错乱。
el-table添加fixed后错位问题
Gpointy的博客
09-29 608
【代码】el-table添加fixed后错位问题。
element--el-table添加合计后固定列x轴滚动条无法滚动问题
m0_50207524的博客
06-16 718
改变固定列滚轮高度问题。
解决elementui el-table前边固定列会遮挡住滚动条 ，左右无法拖动。
崔崔的博客
01-28 6081
当我们使用element table，有时我们需要部分的列固定，我们就给列添加了fxied属性，但是这时候你会发现table的横向滚动条很难拖动，查找原因你会发现原来是固定的列把滚动条给挡住了，只有超出固定的部分滚动条才可以拖动。 解决办法： 1.修改el-table__fixed样式 .el-table { .el-table__fixed { height:auto !important; bottom:17px !important; } }.
elementUI el-table设置fixed后，竖向滚动条滚动到底部表格错位的问题（修改源码）
liusixsixsix的博客
09-07 6078
而dolayout事件会重新计算fixed的高度，这时候我们可以看到，在设置fixed高度时候，此时的this.scrollx是改变列宽前的值，而我们需要的是改变列宽后scrollX的值。：el-table在设置了fixed的条件下，滚动竖向滚动条到最底部的时候，会出现表格错位的问题。：fixed部分也是一个表格，在有滚动条的时候没有加上滚动条的高度，所以会导致错位。可以看出来 fixed表格的高度取得是表格的高度减去竖向滚动条的宽度，3.监听元素变化，表格元素变化之后，也需要调用此方法。
前端开发之el-table(vue2中）固定列fixed滚动条被固定列盖住
m0_50207524的博客
04-08 1027
在使用fixed固定列的时候会出现滚动条被盖住的情况。
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
10-15
本文将深入探讨如何解决在切换ElementUI的tab页后，`el_table`的固定列下方出现多余线条的问题，以及与之相关的固定列显示不全的场景。 首先，让我们分析问题的现象：在切换ElementUI的tab组件时，`el_table`的固定...
Vue中el-table追加行后固定列滚动错位问题
qq_39753413的博客
07-12 3007
Vue中el-table追加行后固定列滚动错位问题 偶然发现一个问题，但是并没有找到解决方案，自己调试了两个多小时终于解决。先贴出问题业务描述：在已查询完全部的符合条件的数据后，表格最下方提示“没有更多数据” 使用solt = “append” 追加div 这时候滑动到最底部，固定列错位了。......
【VUE+ElementUI】el-table表格固定列el-table__fixed导致滚动条无法拖动
sunshineTing2的博客
04-03 1866
当设置了几个固定列之后，点击左侧滚动条却被遮挡
elementUI table fixed设置后，表格无法对齐，滚动条被覆盖
Ja_dream的博客
06-16 982
表格滑动到最后一行后出现无法对齐的情况，这个问题主要是滚动条的原因，因为你设置了::-webkit-scrollbar{ width:1px;}，即：滚动条的width和height不一致导致的，设置成一样的就好了。注：本项目所有的el-table表格的滚动条都增加了高度，故解决方法都是写在全局样式里面，请根据实际情况，修改相应的样式。2、table开启fixed功能后，上下滚动行无法对齐。滚动条被覆盖，导致被覆盖部分没办法拖动。1. 设置公共样式，将被遮罩部分减少。1. 通过css样式，修改表格样式。
element-ui table 组件 fixed 布局遮盖滚动条
qq_36437172的博客
10-27 4994
问题描述：在 element-ui 的 table 组件中，给前两列设置了 fixed 属性，让前两列可以固定，同时设置操作列固定在右侧，不随着滚动条滚动移动，结果发现设置后，固定列的滚动条被遮挡了一部分。 效果图如下： 解决方案： .el-table__fixed, .el-table__fixed-right { height: auto !important; // 让固定列的高自适应，且设置!important覆盖ele-ui的默认样式 bottom: 10px !importa
element问题总结之el-table使用fixed固定列后滚动条滑动到底部或者最右侧的时候错位问题
m0_50207524的博客
04-08 3200
在使用el-table固定行的时候移动滚动条会发现移动到底部或者移动到最右侧的时候会出现表头和内容错位或者是固定列的内容错位的情况。
element ui，table设置fixed表格错位，滚动条无法显示问题
u010939484的博客
03-05 2144
fixed设置了left和right表格固定列错位，滚动条无法显示问题如果项目里面运用的表格比较多。fixed设置了left和right表格固定列错位，滚动条无法显示问题通过设置样式解决。// 根据doLayout方法判断子组件是不是el-table。/deep/ .w-table__fixed-right { // 右固定列。// 获取页面中已注册过ref的所有的子组件。// 执行doLayout方法。2、写统一函数去处理表格。1、固定列错行问题修改。2、滚动条无法显示问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值