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

elementui table 在浏览器分辨率变化的时候界面异常

异常点:

  1. 界面显示不完整,
  2. 表格卡顿,界面已经刷新完成,但是表格的宽度还在一点一点变化,甚至有无线延伸的情况

思路:

 1. 使用doLayout

这里官方文档有说明,

所以我的想法是,监听浏览器的resize事件,然后执行doLayout 方法。

结果是:

偶尔可以解决,偶尔又出现了,,,四舍五入等于没解决

 2. 调整css 样式

是的,没错,调整css样式就可以。

重点就是在我们如何实现以上这种样式。

我最开始的方案是aside 定宽,main则使用flex:1 的方式。(这种方式就会出现上面所说的异常点)

所以我试着进行了调整:

在父级添加 width: 100% 时,aside 定宽不变,但是对于main 则改用calc: (100% - 定宽)。

效果惊人的好,此时无论如何调整浏览器分辨率,el-table 都可以正常显示,且没有出现卡顿的情况。

.box{width: 100%;.aside{width: 240px;}.main{width: calc(100% - 240px);margin: 0 10px;}
}

http://www.lryc.cn/news/150908.html

相关文章:

  • 六、Kafka-Eagle监控
  • DBeaver 23.1.5 发布
  • 三种垃圾收集算法,优缺点分析,设计垃圾收集
  • 【链表OJ 10】环形链表Ⅱ(求入环节点)
  • RT-Thread在STM32硬件I2C的踩坑记录
  • 小白学Go基础01-Go 语言的介绍
  • Spring工具类--Assert的使用
  • 无涯教程-Android - Absolute Layout函数
  • 2018ECCV Can 3D Pose be Learned from2D Projections Alone?
  • 干旱演变研究:定义及研究方法
  • 【LeetCode-中等题】114. 二叉树展开为链表
  • 【题解】JZOJ6645 / 洛谷P4090 [USACO17DEC] Greedy Gift Takers P
  • Vue 项目中的错误如何处理的?
  • 网络分层的真实含义
  • RT-Thread 线程间同步
  • Python元类再解释
  • 常用的Spring Boot 注解及示例代码
  • react app教程
  • 在vue项目中用vue-watermark快捷开发屏幕水印效果
  • 无涯教程-Android - Activity
  • vue项目前端展示数学公式(在表格中渲染)
  • java八股文面试[数据库]——MySQL索引的数据结构
  • python3.11教程2:基础数据类型(数字和字符串)、组合数据类型(集合、元组、列表、字典)
  • 剑指 Offer 44. 数字序列中某一位的数字(中等)
  • SpringBoot中HttpClient的学习
  • JVM-内存溢出的原因、CPU占满的原因
  • 如何做好银行统一报送系统UI设计
  • 988. 从叶结点开始的最小字符串
  • RealSense D455启动教程
  • docker与phpstudy两种方式部署wordpress 并 开启伪静态