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.mzph.cn/news/635079.shtml

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

相关文章

Redis: Redis介绍

文章目录 一、redis介绍二、通用的命令三、数据结构1、字符串类型&#xff08;String&#xff09;&#xff08;1&#xff09;介绍&#xff08;2&#xff09;常用命令&#xff08;3&#xff09;数据结构 2、列表&#xff08;List&#xff09;&#xff08;1&#xff09;介绍&…

CompletableFuture**应用源码分析(三)

2.3 CompletableFuture源码分析 CompletableFuture的源码内容特别多。不需要把所有源码都看了&#xff0c;更多的是要掌握整个CompletableFuture的源码执行流程&#xff0c;以及任务的执行时机。 从CompletableFuture中比较简单的方法作为分析的入口&#xff0c;从而掌握整体执…

python实操之网络爬虫介绍

一、什么是网络爬虫 网络爬虫&#xff0c;也可以叫做网络数据采集更容易理解。它是指通过编程向网络服务器&#xff08;web&#xff09;请求数据&#xff08;HTML表单&#xff09;&#xff0c;然后解析HTML&#xff0c;提取出自己想要的数据。 它包括了根据url获取HTML数据、解…

R.swift SwiftGen 资源使用指南

R.swift 和 SwiftGen 资源转换使用指南 R.swift &#xff08;原始代码会打包到项目&#xff1f;&#xff09; Pod platform :ios, 12.0 target LBtest do# Comment the next line if you dont want to use dynamic frameworksuse_frameworks!pod R.swift # pod SwiftGen, ~&g…

ConcurrentHashMap和HashMap的区别

什么是HashMap &#xff08;1&#xff09;HashMap 是基于 Map 接口的非同步实现&#xff0c;线程不安全&#xff0c;是为了快速存取而设计的&#xff1b;它采用 key-value 键值对的形式存放元素&#xff08;并封装成 Node 对象&#xff09;&#xff0c;允许使用 null 键和 nul…

笨蛋学设计模式行为型模式-观察者模式【14】

行为型模式-观察者模式 8.1观察者模式:arrow_up::arrow_up::arrow_up:8.1.1概念8.1.2场景8.1.3优势 / 劣势8.1.4观察者模式可分为观察者的基本结构&#xff1a; 8.1.5观察者模式8.1.6实战8.1.6.1题目描述8.1.6.2输入描述8.1.6.3输出描述8.1.6.4代码 8.1.7总结 8.1观察者模式⬆️…

(二)基于wpr_simulation 的Ros机器人运动控制,gazebo仿真

一、创建工作空间 mkdir catkin_ws cd catkin_ws mkdir src cd src 二、下载wpr_simulation源码 git clone https://github.com/6-robot/wpr_simulation.git 三、编译 ~/catkin_make 目录下catkin_makesource devel/setup.bash 四、运行 roslaunch wpr_simulation wpb_s…

【Backbone】Vim(Vision Mamba)架构学习笔记

1 学习资料 论文&#xff1a;《Vision Mamba: Efficient Visual Representation Learning with Bidirectional State Space Model》 阅读资料 【博文】《入局CV&#xff0c;Mamba再显神威&#xff01;华科王兴刚团队首次将Mamba引入ViT&#xff0c;更高精度、更快速度、更低…

java小项目:简单的收入明细记事本,超级简单(不涉及数据库,通过字符串来记录)

一、效果 二、代码 2.1 Acount类 package com.demo1;public class Acount {public static void main(String[] args) {String details "收支\t账户金额\t收支金额\t说 明\n"; //通过字符串来记录收入明细int balance 10000;boolean loopFlag true;//控制循…

2023.1.19 关于 Redis 事务详解

目录 Redis 事务对比 MySQL 事务 MySQL 事务 Redis 事务 Redis 事务原子性解释 Redis 事务详解 执行流程 典型使用场景 Redis 事务命令 WATCH 的使用 WATCH 实现原理 总结 阅读下文之前建议点击下方链接了解 MySQL 事务详解 MySQL 事务详解 Redis 事务对比 MySQL 事…

[陇剑杯 2021]jwt

[陇剑杯 2021]jwt 题目做法及思路解析&#xff08;个人分享&#xff09; 问一&#xff1a;昨天&#xff0c;单位流量系统捕获了黑客攻击流量&#xff0c;请您分析流量后进行回答&#xff1a; 该网站使用了______认证方式。&#xff08;如有字母请全部使用小写&#xff09…

C++ 设计模式之备忘录模式

【声明】本题目来源于卡码网&#xff08;题目页面 (kamacoder.com)&#xff09; 【提示&#xff1a;如果不想看文字介绍&#xff0c;可以直接跳转到C编码部分】 【设计模式大纲】 【简介】 -- 什么是备忘录模式 &#xff08;第17种模式&#xff09; 备忘录模式&#xff08;Meme…

【C语言】- 设置控制台标题、编码、文字颜色、大小和字体

【C语言】- 设置控制台标题、编码、文字颜色、大小和字体 文章目录 【C语言】- 设置控制台标题、编码、文字颜色、大小和字体1 - 设置控制台标题2 - 设置控制台编码3 - 设置控制台字体和大小参考链接 1 - 设置控制台标题 因为要用到 Windows API&#xff0c;所以需要包含头文件…

apache下的CollectionUtils工具类

目录 依赖 这个包下 1.安全检查指定的集合是否为空 2.空 安全检查指定的集合是否为空 3.(String)类型中的集合-并集 union 4.(String)类型中的集合-交集 5.(String)类型中交集的补集 6.(String)类型中差集&#xff08;扣除&#xff09; 7.containsAny()方法&#xff1…

UI组件在线预览,程序员直呼“不要太方便~”

一、介绍 以往大家如果想查看组件的使用效果&#xff0c;需要打开DevEco Studio构建工程。现在为了便于大家高效开发&#xff0c;文档上线了JS UI组件在线预览功能&#xff0c;无需本地构建工程&#xff0c;在线即可修改组件样式等参数、一键预览编译效果。程序员直呼&#xff…

可视化k8s页面(Kubepi)

Kubepi是一个简单高效的k8s集群图形化管理工具&#xff0c;方便日常管理K8S集群&#xff0c;高效快速的查询日志定位问题的工具 随便在哪个节点部署&#xff0c;我这里在主节点部署 docker pull kubeoperator/kubepi-server docker run --privileged -itd --restartunless-st…

Webpack5入门到原理14:生产模式介绍

生产模式是开发完成代码后&#xff0c;我们需要得到代码将来部署上线。 这个模式下我们主要对代码进行优化&#xff0c;让其运行性能更好。 优化主要从两个角度出发: 优化代码运行性能 优化代码打包速度 生产模式准备 我们分别准备两个配置文件来放不同的配置 1. 文件目录…

求助帖(setiosflags)的左右对齐问题:

以后自己要注意&#xff0c;如果两个相互矛盾的标志同时被设置&#xff0c;如先设置 setiosflags(ios::right)&#xff0c;然后又设置 setiosflags(ios::left)&#xff0c;那么结果可能就是两个标志都不起作用。因此&#xff0c;在设置了某标志&#xff0c;又要设置其他与之矛盾…

RabbitMQ-生产者可靠性

一、生产者重连 1、概念 由于网络波动导致客户端无法连接上MQ&#xff0c;这是可以开启MQ的失败后重连机制。 注意&#xff1a; 是连接失败的重试&#xff0c;而不是消息发送失败后的重试。 2、开启配置 spring:rabbitmq:template:retry:enabled: true # 是否启用重试机制ma…

尝试计算π的值,并统计π的小数部分中每个数字出现的次数,当所有数字出现次数相等时停止计算

from mpmath import mp # 设置π的精度 mp.dps 100000 # 设置所需精度 # 初始化计数器 digit_counts [0] * 10 # 开始尝试计算并统计 for i in range(1, mp.dps 1): # 获取当前精度的π值 pi_str str(mp.pi)[2:] # 跳过"3." # 统计各数字出现次数 …