[记录贴] 关于element-ui 表格 fixed的坑

最新推荐文章于 2024-07-23 15:23:30 发布

T_emmmm

最新推荐文章于 2024-07-23 15:23:30 发布

阅读量3k

点赞数 1

分类专栏：记录贴文章标签： vue.js

本文链接：https://blog.csdn.net/T_emmmm/article/details/106619876

版权

记录贴专栏收录该内容

3 篇文章 0 订阅

订阅专栏

表格字段加上 fixed 实现固定列滚动表格之后出现了表格行错乱的问题
在这里插入图片描述
表格对不齐最后想到改变字体大小实现格式对齐

这是个死方法，也可以解决，不知道有没有更好的方法

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

T_emmmm

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

element-ui table树形表格懒加载修改数据后没有重新load子集数据的解决办法

lxl5lxl的博客

01-20

2498

element-ui table树形表格懒加载修改数据后没有重新load子集数据 element-ui table树形表格懒加载修改数据后没有重新load子集数据添加:key="Math.random()"可以实现每次展开时调用:load="loadChild"方法

element ui，table设置fixed表格错位，滚动条无法显示问题

u010939484的博客

03-05

2040

fixed设置了left和right表格固定列错位，滚动条无法显示问题如果项目里面运用的表格比较多。fixed设置了left和right表格固定列错位，滚动条无法显示问题通过设置样式解决。// 根据doLayout方法判断子组件是不是el-table。/deep/ .w-table__fixed-right { // 右固定列。// 获取页面中已注册过ref的所有的子组件。// 执行doLayout方法。2、写统一函数去处理表格。1、固定列错行问题修改。2、滚动条无法显示问题。

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

Element-ui el-table 表格 fixed 固定导致表格滚动窜行错位的解决方法

最新发布

qq_42101569的博客

07-23

729

el- table 对表格列项设置fixed 左右固定列的时候,移动滚动条到页面底部会出现表头和内容错位或者是固定列的内容错位的情况。

使用element-ui table组件 fixed 布局错位

baidu_33164415的博客

12-24

750

使用element-ui table组件 fixed 布局错位

elementUI table fixed设置后，表格无法对齐，滚动条被覆盖

Ja_dream的博客

06-16

885

表格滑动到最后一行后出现无法对齐的情况，这个问题主要是滚动条的原因，因为你设置了::-webkit-scrollbar{ width:1px;}，即：滚动条的width和height不一致导致的，设置成一样的就好了。注：本项目所有的el-table表格的滚动条都增加了高度，故解决方法都是写在全局样式里面，请根据实际情况，修改相应的样式。2、table开启fixed功能后，上下滚动行无法对齐。滚动条被覆盖，导致被覆盖部分没办法拖动。1. 设置公共样式，将被遮罩部分减少。1. 通过css样式，修改表格样式。

【VUE+ElementUI】el-table表格固定列el-table__fixed导致滚动条无法拖动

sunshineTing2的博客

04-03

1760

当设置了几个固定列之后，点击左侧滚动条却被遮挡

element-ui table设置列fixed时X轴滚动条无法拖动问题

weixin_39119856的博客

06-13

1780

问题原因： table的列设置fixed后，element框架在渲染时会再生成一个table，宽度为所有固定列之和，这个固定列的table将原有table的滚动条遮盖了。解决方法：方法一：改变固定列table的高度方法二：改变层级......

elementui table fixed错位

qq_44552416的博客

08-12

5399

最常见扯淡的就是给column设置：key=“Math.random()” 一点效果都没有，还在每次渲染的时候做一次js计算。目前在官方没有解决这个bug前如果有人碰到类似问题。建议大家监听table数据，每次数据得到或改变的时候去重新渲染一下 element-ui目前已经修复该bug.如下：解决办法重新计算table布局 /* 监听table数据对象 */ watch: { tableData(val) { this.doLayout(); } } /* 重新.

Element-UI，el-table表头列错位问题解决（出现滚动条及使用fixed列）

vidvan的专栏

11-23

6460

Element-UI，el-table表头列错位问题解决（出现滚动条及使用fixed列）

element-ui的table使用fixed错位的解决方法

热门推荐

凡江林的博客

09-05

1万+

问题描述在element-ui的table使用fixed固定列的时候，发现切换后返回，固定列会出现错位的情况。如下图所示：解决方法遇到问题，去百度啊。百度一下，你就知道！而在此之前，查阅官网，补充一下table的方法的一些知识，如下图所示。table表格有一个doLayout的方法，该方法会对table由隐藏变为可见进行重新布局。下面，对百度收集到的内容，进行整合： /* 监听table数据对象 */ watch: { tableData(val) { this.doLayout()

Vue +elementui表格组件路由切换时页面内容没有重新加载

周二也被占用

06-09

9443

elementui表格组件内容已经更新，但是再次进入含表格vue路由页面时，页面内容不会刷新问题原因：在组件mounted钩子中调用的刷新页面内容，但测试发现这个钩子没有被调用。后来发现index.vue中使用了<keep-alive>： <keep-alive> <router-view></router-view> </ke...

element 表格使用fixed无效

weixin_49261425的博客

07-02

3810

/*设置overflow*/ /deep/ .el-table__body-wrapper{ overflow: auto; } /*表头和内容给一个固定宽度*/ /deep/ .el-table__header{ width: 1918px !important; } /deep/ .el-table__body{ width:1900px !important; } /deep/ .el-table__footer{ width: 1918px !important; } 如何有滚动.

【el-table笔记】设置fixed不起作用

m0_74101213的博客

07-17

2076

el-table设置fixed不起作用。

使用el-table合并表头后，fixed固定列不起作用

coco_coolgirl的博客

08-14

1133

差百度和github后发现了一种有效方法。使用fixed后会出现表格错乱。

fixed定位失效问题如何解决

qq_43680154的博客

08-26

2100

如何解决fixed定位的问题

elementUI el-table设定fixed后，边框拖动不展示问题解决，（要开始ma人啦）

xingyu_qie的专栏

10-09

2972

今天遇到了一个elementui的表格el-table，右侧“操作”一列设定fixed后，当拖动的过程中，前一列边框偶发不展示的问题。说实话，解决的很费劲，原本以为1个小时搞定，磨磨蹭蹭，搞了3个小时。

el-table组件的el-table-column电脑端使用fixed属性固定，移动端不使用固定，怎么实现？

m0_61663332的博客

07-28

1981

el-table组件的el-table-column电脑端使用fixed属性固定，移动端不使用固定

使用element ui 表格时关于 fixed 的错位问题

徐飞的博客

06-27

2304

使用element ui 表格时关于 fixed 的错位问题最近公司发现了一个很神奇的 bug，在查询员工排班情况的时候发现做好的表格显示错位。如下图：

自定义指令解决elementUI中table组件的column设置fixed属性后，滚动时表格无法对齐的问题

beretHat_5的博客

03-25

2129

问题： el-table组件中，column在设置了fixed属性的情况下下，垂直滚动会出现表格错位的问题。分析： column在设置了fixed=“left”或fixed=“right”后，在table的对应位置增加了对应个数的column，它们都被设置为position: fixed。下面的table只是被固定的column遮盖，当垂直方向有滚动事件时，两侧固定column会动态计算滚动高度。但是实际使用中计算的时候会受头部样式或padding的影响而计算出错，导致出现表格错位的问题。

vue3+element-ui实现el-table表格组件自动循环滚动

04-26

对于实现el-table表格组件自动循环滚动，可以使用element-ui提供的scroll组件，并设置它的属性为loop：true。具体实现步骤如下： 1. 在template中使用el-table组件，并设置属性fixed-layout和height，fixed-layout为true时，固定表格布局，height设置表格的高度。 2. 在el-table标签内部，使用el-scrollbar组件，设置其属性v-model和noresize，其中v-model为当前滚动位置，noresize为禁止重新调整尺寸。 3. 在el-scrollbar内部使用el-table-column组件，设置表格的列信息，并填充数据。注意：表格的列宽需固定，否则会影响滑动效果。 4. 最后，在el-table组件中使用el-table-column定义的列信息，呈现数据。实现以上步骤后，即可得到一个自动循环滚动的el-table表格组件。