el-table样式错乱解决方案

news/2025/3/14 17:54:30/

bug:

图片的椭圆框住的地方,在页面放大缩小之后就对不齐了。

 原因:

主要原因是当你对页面放大缩小的时候,页面进行了重构,页面的宽高及样式进行了变化,但是在这个更新的过程中,table的反应并没有及时更新或者说是没有更新造成了页面样式上的差异

解决方案:

1.使用el-table的方法

方法名说明参数
doLayout对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时,可能需要调用此方法

这个方法主要是在table进行重新布局触发,主要相当于重新渲染table,防止页面的错乱

代码如下:

通过钩子函数updated页面更新时触发,然后通过ref拿到组件实例执行doLayout这个方法。

  <el-tableborderheight="100%"ref="table":data="tableDataL"tooltip-effect="dark"show-summary :summary-method="getSummariesL"row-key="id":row-class-name="rowClassName"@selection-change="handleSelectionChange":row-style="rowClass" >updated() {this.$nextTick(() => {this.$refs.table.doLayout()      })
},

但是仅仅加上了上面的代码,好像。。。并没有效果呐,哭了

在进行页面放大缩小时,如果出现了el-table样式上的行错乱和对不齐,可能是由于缩放引起布局问题。在这种情况下,使用 doLayout 方法可能无法解决问题

2.盒子包裹

后面发现el-table在页面中并没有被盒子包裹,table也需要通过外面的盒子控制

再弹性布局中独占一份,浏览器开启显示滚动条以便查看看不到的内容

原因是div作为块级元素可以自动适应父元素的宽度。

增加下方代码,把原来没被包裹的el-table用div包起来即可

 //html<div class="conter" ><el-table>//内容</el-table></div>//css.conter{flex: 1;overflow: auto;}

查看效果:

可以清楚地看到在快速拖动的时候,列也是有点错乱的,但是当停下时立马又变成了原来的样子

不仔细看根本看不出来

 已成功解决


http://www.ppmy.cn/news/1326451.html

相关文章

数据结构排序二叉树(下)

哎,调了几天深度学习模型,今天来更新排序二叉树 文章目录 前言 一、排序二叉树的结构定义 二、在排序二叉树添加数据 三、定义创建排序二叉树函数 四、查找一棵二叉排序树中的结点x的所在层数 五、删除二叉排序树中T关键字x的节点 六、查找二叉排序树中的所有小于key的关…

Cmake(1)——Cmake的基本介绍和原理、Cmake的安装、如何使用Cmake构建项目

Cmake的基本介绍和原理、Cmake的安装、如何使用Cmake构建项目 插播&#xff01;插播&#xff01;插播&#xff01;亲爱的朋友们&#xff0c;我们的Cmake课程上线啦&#xff01;感兴趣的小伙伴可以去下面的链接学习哦~ https://edu.csdn.net/course/detail/39261 1、Cmake的基…

位运算的奇技淫巧

常见位运算总结&#xff1a; 1、基础位运算 左移<<运算 将二进制数向左移位操作&#xff0c;高位溢出则丢弃&#xff0c;低位补0。 右移>>运算 右移位运算中&#xff0c;无符号数和有符号数的运算并不相同。对于无符号数&#xff0c;右移之后高位补0&#xff…

基于SpringBoot Vue自习室管理系统

大家好✌&#xff01;我是Dwzun。很高兴你能来阅读我&#xff0c;我会陆续更新Java后端、前端、数据库、项目案例等相关知识点总结&#xff0c;还为大家分享优质的实战项目&#xff0c;本人在Java项目开发领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#x…

利用浏览器开发者工具进行网页性能优化

目录 学习目标&#xff1a; 学习内容&#xff1a; 学习时间&#xff1a; 学习产出&#xff1a; 网页性能优化的基本概念和指标&#xff1a; 浏览器开发者工具的基本功能和使用方法&#xff1a; 使用网络面板进行网页加载性能分析&#xff1a; 使用性能面板进行网页渲染性能分析…

Spring Boot框架中Controller层API接口如何支持使用多个@RequestBody注解接受请求体参数

一、前言 众所周知&#xff0c;在Spring Boot框架中&#xff0c;Controller层API接口编码获取请求体参数时&#xff0c;在参数上会使用RequestBody注解&#xff1b;如果一次请求中&#xff0c;请求体参数携带的内容需要用多个参数接收时&#xff0c;能不能多次使用RequestBody…

Git学习笔记(第6章):GitHub操作(远程库操作)

目录 6.1 远程库操作 6.1.1 创建远程库 6.1.2 命名远程库 6.1.3 本地库推送到远程库(push) 6.1.4 远程库拉取到本地库(pull) 6.1.5 远程库克隆到本地库(clone) 6.2 团队内协作 6.3 跨团队协作 6.4 SSH免密登录 6.1 远程库操作 命令 作用 git remote -v 查看所有远程…

【24.1.19】

24.1.19 本周工作内容下周工作计划 本周工作内容 本周的话主要的一个工作还是第三部分页面部分的完成工作&#xff0c;那就先来汇报一下第三部分的工作进度&#xff0c;第三部分的页面工作呢已经完成啦&#xff0c;就在刚刚提交啦全部的代码&#xff0c;那么这一部分的工作呢也…