el-table样式错乱解决方案

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.rhkb.cn/news/243817.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分类预测 | Matlab实现WOA(海象)-XGboost分类【24年新算法】基于海象优化算法(WOA)优化XGBoost的数据分类预测

分类预测 | Matlab实现WOA(海象)-XGboost分类【24年新算法】基于海象优化算法(WOA)优化XGBoost的数据分类预测 目录 分类预测 | Matlab实现WOA(海象)-XGboost分类【24年新算法】基于海象优化算法(WOA)优化XGBoost的数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本…

Java面试汇总——jvm篇

目录 JVM的组成&#xff1a; 1、JVM 概述(⭐⭐⭐⭐) 1.1 JVM是什么&#xff1f; 1.2 JVM由哪些部分组成&#xff0c;运行流程是什么&#xff1f; 2、什么是程序计数器&#xff1f;(⭐⭐⭐⭐) 3、介绍一下Java的堆(⭐⭐⭐⭐) 4、虚拟机栈(⭐⭐⭐⭐) 4.1 什么是虚拟机栈&…

C#,入门教程(28)——文件夹(目录)、文件读(Read)与写(Write)的基础知识

上一篇&#xff1a; C#&#xff0c;入门教程(27)——应用程序&#xff08;Application&#xff09;的基础知识https://blog.csdn.net/beijinghorn/article/details/125094837 C#知识比你的预期简单的多&#xff0c;但也远远超乎你的想象&#xff01; 与文件相关的知识&#xf…

【JAVA】我和我的第一个“对象”相遇

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-zAjv1fTLGQmnqncy {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

刷题总结 1.23

三阶B-树根节点最少有一个关键字&#xff0c;其他节点最少【3/2】-1&#xff08;向上取整&#xff09;&#xff0c;即为1&#xff1b; 所以该B树为一颗满二叉树&#xff0c;关键字个数为31&#xff1b; 这里的最优二叉树指的是赫夫曼二叉树&#xff0c;由赫夫曼二叉树的构造可…

MongoDB单机部署

Windows系统中的安装启动 第一步&#xff1a;下载安装包 MongoDB 提供了可用于 32 位和 64 位系统的预编译二进制包&#xff0c;你可以从MongoDB官网下载安装&#xff0c;MongoDB 预编译二进制包下载地址&#xff1a;https://www.mongodb.com/try/download/community 根据上…

抖音评论区链接,如何实现跳转到微信?-数灵通

在抖音发布带货视频后&#xff0c;如何有效地将用户吸引到我们的店铺呢&#xff1f;以微商为例&#xff0c;我们可以利用抖音评论区的评论置顶功能来达到这一目的。 评论置顶功能允许作者将一条评论置于评论区的顶部&#xff0c;使其成为评论区的焦点。我们可以利用这一功能来吸…

安装ROS2-ubuntu

相较于ROS1&#xff0c;ROS2在设计之初就考虑了在产品环境下⾯临的⼀些挑战&#xff0c;具体来说&#xff0c;ROS2采⽤&#xff08;或者计划采⽤&#xff09;以下策略以提升其在产品环境的适⽤度&#xff1a; ⽀持多机器⼈ 对⼩型嵌⼊式设备和微控制器的⽀持 实时系统&am…

如何在WordPress中使用 AI 进行 SEO(12 个工具)

您想在 WordPress 中使用 AI 进行 SEO 吗&#xff1f; 人工智能正在对 SEO 行业产生重大影响。已经有优秀的人工智能 SEO 工具&#xff0c;您可以使用它们来提高您的 SEO 排名&#xff0c;而无需付出太多努力。 在本文中&#xff0c;我们将向您展示如何通过我们精心挑选的工具…

html 3D 倒计时爆炸特效

下面是代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>HTML5 Canvas 3D 倒计时爆炸特效DEMO演示</title><link rel"stylesheet" href"css/style.css" media"screen&q…

架构篇10:架构设计流程-识别复杂度

文章目录 架构设计第 1 步&#xff1a;识别复杂度识别复杂度实战识别复杂度心得小结 从今天开始&#xff0c;我们分4期&#xff0c;结合复杂度来源和架构设计原则&#xff0c;通过一个模拟的设计场景“前浪微博”&#xff0c;一起看看在实践中究竟如何进行架构设计。今天先来看…

Zookeeper+Kafka集群

1 Zookeeper 1.1 Zookeeper概述 Zookeeper是一个开源的分布式的&#xff0c;为分布式框架提供协调服务的Apache项目。 分布式系统管理框架&#xff0c;主要用来解决分布式应用集群中应用系统的一致性问题&#xff0c;想大于各种分布式应用的注册中心文件系统通知机制 本质 …

element plus表格的表头和内容居中

文章目录 需求分析 需求 对于 element-plus 中的 table 进行表头和内容的居中显示 分析 单列的表头和内容居中 &#xff1a; 在对应的那一列加上align“center” 即可 <el-table-column prop"name" label"商品名称" align"center" />…

0004.电脑开机提示按F1

常用的电脑主板不知道什么原因&#xff0c;莫名其妙的启动不了了。尝试了很多方法&#xff0c;没有奏效。没有办法我就只能把硬盘拆了下来&#xff0c;装到了另一台电脑上面。但是开机以后却提示F1&#xff0c;如下图&#xff1a; 根据上面的提示&#xff0c;应该是驱动有问题…

『论文阅读|2024 WACV 多目标跟踪Deep-EloU|纯中文版』

论文题目&#xff1a; Iterative Scale-Up ExpansionIoU and Deep Features Association for Multi-Object Tracking in Sports 论文特点&#xff1a; 作者提出了一种迭代扩展的 ExpansionIoU 和深度特征关联方法Deep-EIoU&#xff0c;用于体育场景中的多目标跟踪&#xff0c;旨…

JAVA的双亲委派机制

目录 双亲委派的介绍破坏双亲委派模型OSGI 双亲委派&#xff08;Parent Delegation&#xff09;是一种软件设计模式&#xff0c;常用于Java类加载器的实现。它通过继承关系来实现类的加载&#xff0c;即每个类加载器都有一个父加载器&#xff0c;当一个类加载器需要加载一个类时…

测试工程师必看!测试用例设计全解析,让你彻底掌握

测试工程师在入行时&#xff0c;都会接触到一个名词——测试用例&#xff0c;都知道测试用例是干什么用的&#xff0c;提到设计测试用例的方法&#xff0c;大部分测试工程师都会侃侃而谈&#xff1a;等价类法、边界值法、判定表法、正交分解法……这些方法说起来都如数家珍&…

一、认识 JVM 规范(JVM 概述、字节码指令集、Class文件解析、ASM)

1. JVM 概述 JVM&#xff1a;Java Virtual Machine&#xff0c;也就是 Java 虚拟机 所谓虚拟机是指&#xff1a;通过软件模拟的具有完整硬件系统功能的、运行在一个完全隔离环境中的计算机系统。 即&#xff1a;虚拟机是一个计算机系统。这种计算机系统运行在完全隔离的环境中…

Linux网络编程(二-套接字)

目录 一、背景知识 1.1 端口号 1.2 网络字节序 1.3 地址转换函数 二、Socket简介 三、套接字相关的函数 3.1 socket() 3.2 bind() 3.3 connect() 3.4 listen() 3.5 accept() 3.6 read()/recv()/recvfrom() 3.7 send()/sendto() 3.8 close() 四、UPD客服/服务端实…

打造专业级ChatGPT风格聊天界面:SpringBoot与Vue实现动态打字机效果,附完整前后端源码

大家好&#xff0c;今天用SpringBoot、vue写了一个仿ChatGPT官网聊天的打字机效果。 所有代码地址:gitee代码地址 &#xff0c;包含前端和后端&#xff0c;可以直接运行 使用本技术实现的项目&#xff1a;aicnn.cn&#xff0c;欢迎大家体验 如果文章知识点有错误的地方&#xf…