当前位置: 首页 > news >正文

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;}

查看效果:

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

不仔细看根本看不出来

 已成功解决

相关文章:

  • 鸿蒙开发系列教程(五)--ArkTS语言:组件开发
  • Java SE入门及基础(23)
  • 力扣hot100 最长有效括号 动态规划
  • Blendshape 表情控件
  • RenderDoc 增加 DXBC to HLSL 的 shader viewer
  • docker 的 Dockerfile 简单使用
  • 分布式ID(2):雪花算法生成ID
  • GL Logger和CANFDLog-OTL-128两款记录仪都是如何实现高效的报文录制的?
  • 跟着cherno手搓游戏引擎【6】ImGui和ImGui事件
  • MyBatis 使用报错:org.xml.sax.SAXParseException 元素内容必须由格式正确的字符数据或标记组成
  • OpenHarmony 应用开发入门 (一、环境搭建及第一个Hello World)
  • 数据结构之二叉搜索树
  • 尚硅谷Nginx高级配置笔记
  • 集成开发环境(IDE)介绍
  • 【Vue3】3-2 : 组件的概念及组件的基本使用方式
  • 【391天】每日项目总结系列128(2018.03.03)
  • 【Redis学习笔记】2018-06-28 redis命令源码学习1
  • crontab执行失败的多种原因
  • Docker: 容器互访的三种方式
  • ES6--对象的扩展
  • HashMap剖析之内部结构
  • JavaScript 奇技淫巧
  • Python_OOP
  • Terraform入门 - 1. 安装Terraform
  • Webpack4 学习笔记 - 01:webpack的安装和简单配置
  • 阿里研究院入选中国企业智库系统影响力榜
  • 等保2.0 | 几维安全发布等保检测、等保加固专版 加速企业等保合规
  • 七牛云 DV OV EV SSL 证书上线,限时折扣低至 6.75 折!
  • 如何使用Mybatis第三方插件--PageHelper实现分页操作
  • 使用 Docker 部署 Spring Boot项目
  • 小程序滚动组件,左边导航栏与右边内容联动效果实现
  • 好程序员大数据教程Hadoop全分布安装(非HA)
  • ​软考-高级-信息系统项目管理师教程 第四版【第14章-项目沟通管理-思维导图】​
  • ​虚拟化系列介绍(十)
  • #### go map 底层结构 ####
  • (02)Cartographer源码无死角解析-(03) 新数据运行与地图保存、加载地图启动仅定位模式
  • (android 地图实战开发)3 在地图上显示当前位置和自定义银行位置
  • (C语言)共用体union的用法举例
  • (C语言)深入理解指针2之野指针与传值与传址与assert断言
  • (day 12)JavaScript学习笔记(数组3)
  • (LNMP) How To Install Linux, nginx, MySQL, PHP
  • (带教程)商业版SEO关键词按天计费系统:关键词排名优化、代理服务、手机自适应及搭建教程
  • (理论篇)httpmoudle和httphandler一览
  • (转)原始图像数据和PDF中的图像数据
  • .Mobi域名介绍
  • .NET C# 使用 SetWindowsHookEx 监听鼠标或键盘消息以及此方法的坑
  • .net core 6 集成 elasticsearch 并 使用分词器
  • .Net MVC4 上传大文件,并保存表单
  • .NET/C# 编译期间能确定的相同字符串,在运行期间是相同的实例
  • .net的socket示例
  • /etc/skel 目录作用
  • /ThinkPHP/Library/Think/Storage/Driver/File.class.php  LINE: 48
  • ??eclipse的安装配置问题!??
  • @font-face 用字体画图标
  • @基于大模型的旅游路线推荐方案