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

异常点:

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

思路:

1. 使用doLayout

这里官方文档有说明,

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

结果是:

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

2. 调整css 样式

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

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

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

所以我试着进行了调整:

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

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

css 复制代码
.box{
  width: 100%;
  .aside{
    width: 240px;
  }
  .main{
    width: calc(100% - 240px);
    margin: 0 10px;
  }
}
相关推荐
wearegogog1232 小时前
基于 MATLAB 的卡尔曼滤波器实现,用于消除噪声并估算信号
前端·算法·matlab
Drawing stars3 小时前
JAVA后端 前端 大模型应用 学习路线
java·前端·学习
品克缤3 小时前
Element UI MessageBox 增加第三个按钮(DOM Hack 方案)
前端·javascript·vue.js
小二·3 小时前
Python Web 开发进阶实战:性能压测与调优 —— Locust + Prometheus + Grafana 构建高并发可观测系统
前端·python·prometheus
小沐°3 小时前
vue-设置不同环境的打包和运行
前端·javascript·vue.js
qq_419854054 小时前
CSS动效
前端·javascript·css
烛阴4 小时前
3D字体TextGeometry
前端·webgl·three.js
桜吹雪4 小时前
markstream-vue实战踩坑笔记
前端
南村群童欺我老无力.4 小时前
Flutter应用鸿蒙迁移实战:性能优化与渐进式迁移指南
javascript·flutter·ci/cd·华为·性能优化·typescript·harmonyos
C_心欲无痕4 小时前
nginx - 实现域名跳转的几种方式
运维·前端·nginx