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.hqwc.cn/news/417606.html

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

相关文章

高功率PCB设计中的EMC挑战与解决策略

在高功率PCB设计中&#xff0c;电磁兼容性&#xff08;EMC&#xff09;是一个关键问题&#xff0c;它涉及到保证电子设备在各种环境下正常运作&#xff0c;不受电磁干扰&#xff08;EMI&#xff09;的影响&#xff0c;同时也不对其他设备产生干扰。本文将从一个全面的视角探讨高…

C#,因数分解(质因子分解)Pollard‘s Rho算法的源代码

因数分解&#xff08;也称为质因子分解&#xff09;&#xff1a;将一个大整数分解它的质因子之乘积的算法。 Pollard Rho算法的基本思路&#xff1a;先判断当前数是否是素数&#xff08;质数&#xff09;&#xff0c;如果是&#xff0c;则直接返回。如果不是&#xff0c;继续找…

RabbitMQ入门篇【图文并茂,超级详细】

&#x1f973;&#x1f973;Welcome 的Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Docker的相关操作吧 目录 &#x1f973;&#x1f973;Welcome 的Huihuis Code World ! !&#x1f973;&#x1f973; 前言 1.什么是MQ 2.理解MQ 3.生活…

什么是安全SCDN,有什么作用?

前两天有个站长被朋友推荐联系到了德迅云安全&#xff0c;想要对自己网站做一些安全防护&#xff0c;聊天中问及到了安全SCDN是什么意思&#xff0c;有哪些作用&#xff1f;那么德迅云安全今天就来简单讲述一下安全SCDN&#xff0c;来了解下什么是安全SCDN&#xff0c;以及它有…

JVM:Java类加载机制

Java类加载机制的全过程&#xff1a; 加载、验证、准备、初始化和卸载这五个阶段的顺序是确定的&#xff0c;类型的加载过程必须按照这种顺序按部就班地开始&#xff0c;而解析阶段则不一定&#xff1a;它在某些情况下可以在初始化阶段之后再开始&#xff0c; 这是为了支持Java…

10 个优化技巧,减少 Docker 镜像大小

什么是 docker? Docker 是一种容器引擎,可以在容器内运行一段代码。Docker 镜像是在任何地方运行您的应用程序而无需担心应用程序依赖性的方式。 要构建镜像,docker 使用一个名为 Dockerfile 的文件。Dockerfile 是一个包含许多指令(RUN、COPY、EXPOSE 等)的文件。成功执…

索引的概述和性能分析

索引index&#xff0c;是一种有序的数据结构&#xff0c;可以高效的获取数据&#xff0c;在数据库中维护着满足查找特定算法的数据结构&#xff0c;就是索引 无索引的情况&#xff0c;查询数据时会全表扫描&#xff0c;效率极低 索引结构 &#xff08;1&#xff09;二叉树&…

防火墙部署安全区域

目录 为什么需要安全区域在防火墙上如何来区分不同的网络将接口划分到安全区域安全区域、受信任程度与安全级别安全域间、安全策略与报文流动的方向 安全区域配置案例 为什么需要安全区域 防火墙主要部署在网络边界起到隔离的作用 在防火墙上如何来区分不同的网络 防火墙通过安…

力扣36. 有效的数独

模拟 思路&#xff1a; 使用三个哈希表来存储数字个数 row[r][val] 用于存储第 r 行 val 1 的个数&#xff1b;column[c][val] 用于存储第 c 列 val 1 的个数&#xff1b; subboxes[i][j][val] 用于存储第 i 行、第 j 列个小九宫格 val 1 的个数&#xff0c;其中&#xff1…

大模型学习与实践笔记(七)

一、环境配置 1.平台&#xff1a; Ubuntu Anaconda CUDA/CUDNN 8GB nvidia显卡 2.安装 # 构建虚拟环境 conda create --name xtuner0.1.9 python3.10 -y # 拉取 0.1.9 的版本源码 git clone -b v0.1.9 https://github.com/InternLM/xtuner# 从源码安装 XTuner pip insta…

matlab抽取与插值

什么是抽取&#xff1f; 我们假设一个数字信号 x ( n ) , n 1 , 2 , . . . , N x(n),n1,2,...,N x(n),n1,2,...,N共有 N N N个点&#xff0c;抽取就是每个几个点抽1个点&#xff0c;比如2倍抽取&#xff0c;那么抽取后的信号为 y ( n ) , y ( 1 ) x ( 1 ) , y ( 2 ) x ( 3 …

SpringSecurity Web 权限方案

目录 一、设置登录系统的账号、密码 二、数据库查询用户名密码 三、自定义登录页面 四、基于角色或权限进行访问控制 &#xff08;一&#xff09;hasAuthority 方法 &#xff08;二&#xff09;hasAnyAuthority 方法 &#xff08;三&#xff09;hasRole 方法 &#xff…