el-table样式错乱解决方案

bug:

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

 原因:

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

解决方案:

1.使用el-table的方法

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

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

代码如下:

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

  <el-table
        border
        height="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.mfbz.cn/a/335467.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

git使用的常用指令

git作为一个版本控制工具&#xff0c;和maven并合称为实习的两大杀手工具。今天我来给大家介绍一下git的常用指令&#xff0c;帮助大家在实习和多人协同开发的时候提供一些帮助。 找到git管理的文件夹 命令1 git init 这个命令是为了初始化本地库 命令2 查看当前的git状态…

怎么做表单链接_从表单链接到营销策略

从表单链接到营销策略&#xff1a;一场无与伦比的转化之旅 在数字营销的世界里&#xff0c;表单链接是一种至关重要的元素。它不仅是一个简单的链接&#xff0c;更是企业与潜在客户之间建立联系的桥梁。如何将表单链接巧妙地融入营销策略&#xff0c;让潜在客户转化为真正的客…

JUC并发编程-线程和进程、Synchronized 和 Lock、生产者和消费者问题

1、什么是JUC 源码 官方文档 面试高频问&#xff01; java.util 工具包、包、分类 业务&#xff1a;普通的线程代码 Thread Runnable Runnable 没有返回值、效率相比入 Callable 相对较低&#xff01; 2、线程和进程 线程、进程&#xff0c;如果不能使用一句话说出来的技术…

力扣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…

论文笔记:基于CLIP引导学习的多模式假新闻检测

整理了ICME2023 Multimodal Fake News Detection via CLIP-Guided Learning&#xff09;论文的阅读笔记 背景模型实验 背景 对于我们这一代人来说&#xff0c;在线社交网络在很大程度上取代了以报纸和杂志为代表的传统信息交流方式。人们喜欢在社交媒体上寻找朋友或分享观点。然…

Linux系统安装NFS服务器

NFS是一种网络文件系统&#xff0c;英文全称Network File System&#xff0c;通过NFS可以让不同的主机系统之间共享文件或目录。通过NFS&#xff0c;用户可以直接在本地NFS客户端读写NFS服务端上的文件&#xff0c;是非常好的共享存储工具。本篇文章将介绍如何在CentOS7上安装N…

2024年【G2电站锅炉司炉】考试报名及G2电站锅炉司炉复审考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 G2电站锅炉司炉考试报名是安全生产模拟考试一点通生成的&#xff0c;G2电站锅炉司炉证模拟考试题库是根据G2电站锅炉司炉最新版教材汇编出G2电站锅炉司炉仿真模拟考试。2024年【G2电站锅炉司炉】考试报名及G2电站锅炉…

在WIN从零开始在QMUE上添加一块自己的开发板(一)

文章目录 一、前言二、源码编译&#xff08;一&#xff09;安装Msys2&#xff08;二&#xff09;配置GCC工具链&#xff08;三&#xff09;安装QEMU构建依赖&#xff08;四&#xff09;下载编译QEMU源码 二、QUME编程基础&#xff08;一&#xff09;QOM机制&#xff08;二&…

如何有效防爬虫?一文讲解反爬虫策略

企业拥抱数字化技术的过程中&#xff0c;网络犯罪分子的“战术”也更难以觉察&#xff0c;并且这些攻击越来越自动化和复杂&#xff0c;也更加难以觉察。在众多攻击手段中&#xff0c;网络爬虫是企业面临的主要安全挑战。恶意爬虫活动可能导致数据滥用、盗窃商业机密等问题&…

MySQL之索引结构

索引概述 索引是帮助MySQL高效获取数据的数据结构&#xff08;有序&#xff09;。 在数据之外&#xff0c;数据库系统还维护着满足特定查找算法的数据结构&#xff0c;这些数据结构以某种方式引用&#xff08;指向&#xff09;数据&#xff0c;这样就可以在这些数据结构上实现…

Ubuntu使用docker-compose安装chatGPT

ubuntu环境搭建专栏&#x1f517;点击跳转 Ubuntu系统环境搭建&#xff08;十五&#xff09;——使用docker-compose安装chatGPT Welcome to the AI era! 使用docker compose安装 在/usr/local文件夹下创建chatgpt mkdir chatgpt创建docker-compose.yaml vim docker-compos…

springcloud OpenFeign服务接口调用

文章目录 代码下载地址OpenFeign简介OpenFeign使用步骤测试 OpenFeign超时控制超时设置&#xff0c;故意设置超时演示出错情况服务提供方8001故意写暂停程序服务消费方80添加超时方法PaymentFeignService服务消费方80添加超时方法OrderFeignController测试YML文件里需要开启Ope…

考研C语言刷编程题篇之分支循环结构基础篇(一)

目录 第一题 第二题 方法一&#xff1a;要循环两次&#xff0c;一次求阶乘&#xff0c;一次求和。 注意&#xff1a;在求和时&#xff0c;如果不将sum每次求和的初始值置为1&#xff0c;那么求和就会重复。 方法二&#xff1a; 第三题 方法一&#xff1a;用数组遍历的思想…

Windows给docker设置阿里源

windows环境搭建专栏&#x1f517;点击跳转 Windows系统的docker设置阿里源 文章目录 Windows系统的docker设置阿里源1.获得镜像加速器2.配置docker 由于我们生活在中国大陆&#xff0c;所以外网的访问总是那么慢又困难&#xff0c;用docker拉取几兆的小镜象还能忍受&#xff…

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

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

Mysql:重点且常用的操作和理论知识整理 ^_^

目录 1 基础的命令操作 2 DDL 数据库定义语言 2.1 数据库操作 2.2 数据表操作 2.2.1 创建数据表 2.2.2 修改和删除数据表 2.2.3 添加外键 3 DML 数据库操作语言 3.1 插入语句(INSERT) 3.2 修改语句(UPDATE) 3.3 删除语句 3.3.1 DELETE命令 3.3.2 TRUNCATE命令 4 …

探索C++中std::string的弱点:你可能未曾注意到的缺点

C中std::string的弱点&#xff1a;你可能未曾注意到的缺点 一、背景二、性能方面的局限三、可变性带来的问题四、内存管理和指针操作五、Unicode和多字节字符集的支持六、其他替代方案七、总结 一、背景 C中std::string是一个非常重要的类&#xff0c;用于表示和处理字符串数据…

前端开发必备 HTML的常用标签(二)

目录 一、HTML语言 二、水平线标签 三、字体样式标签 四、注释和特殊符号 一、HTML语言 HTML&#xff08;Hypertext Markup Language&#xff09;是一种标记语言&#xff0c;用于创建网页的结构和内容。它由一系列的标签组成&#xff0c;这些标签定义了网页中各个元素的结…

如何防护网站存在的sql注入攻击漏洞

SQL注入攻击是最危险的Web漏洞之一&#xff0c;危害性极大&#xff0c;造成的后果不堪设想&#xff0c;因此受到了大家的高度重视。那么你知道SQL注入攻击防范方法有哪些吗? SQL注入是一种网站的攻击方法。它将SQL代码添加到网站前端GET POST参数中&#xff0c;并将其传递给my…

MSPM0L1306例程学习-UART部分(2)

MSPM0L1306例程学习系列 1.背景介绍 写在前边的话&#xff1a; 这个系列比较简单&#xff0c;主要是围绕TI官网给出的SDK例程进行讲解和注释。并没有针对模块的具体使用方法进行描述。所有的例程均来自MSPM0 SDK的安装包&#xff0c;具体可到官网下载并安装: https://www.ti…
最新文章