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

这篇具有很好参考价值的文章主要介绍了elementui table 在浏览器分辨率变化的时候界面异常。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

异常点:

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

思路:

 1. 使用doLayout

这里官方文档有说明,

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

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

结果是:

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

 2. 调整css 样式

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

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

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

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

所以我试着进行了调整:

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

效果惊人的好,此时无论如何调整浏览器分辨率,el-table 都可以正常显示,且没有出现卡顿的情况。文章来源地址https://www.toymoban.com/news/detail-682073.html

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

到了这里,关于elementui table 在浏览器分辨率变化的时候界面异常的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 屏幕分辨率:PC / 手机 屏幕常见分辨率,前端如何适配分辨率

    一、常见的PC屏幕分辨率 序号 水平像素点数和垂直像素点数 也被称为 常见显示器 1 1366 × 768 720p 或 HD Ready 常见于笔记本电脑和低端桌面显示器 2 1920 × 1080 1080p 或 Full HD / 全高清 高端笔记本电脑和中高档台式机 3 2560 × 1440 2K 分辨率 常见于高端笔记本电脑和高端台式机 4 38

    2024年02月03日
    浏览(67)
  • iphone更改照片分辨率?手机怎样修改图片分辨率?

    现在手机越来越智能,已经能替代电脑完成很多平时的工作,而且手机携带也更加方便,例如现在很多的考试网上报名就可以通过手机来完成,但最近有很多小伙伴来咨询提交证件照时为什么总是显示上传失败无法识别?其实这种问题一般是由于提交的证件照的分辨率不符合

    2024年02月11日
    浏览(71)
  • windows多显示器设置分辨率,自定义分辨率

    方法1:系统自带分辨率 1、单机设置 2、单击屏幕 3、根据显示效果选择显示方式,我这里设置为扩展显示器,可以根据显示器排列方式,拖动上面的两个显示器框来更改显示效果,例如我的副显示器在右边就把图中的2显示器拖到右边 4、根据需要设置哪个显示器来设置分辨率

    2024年02月06日
    浏览(54)
  • 显示器尺寸 和 屏幕分辨率 和 有源信号分辨率 关系

    1、 显示器尺寸尺寸:常用显示器对角线长度表示 。比如,23.8寸显示器指的是显示器的液晶屏对角线长度是23.8英寸。 只靠英寸并不能决定显示屏长宽,通常,我们还要知道其长宽比,比如16:9。通过长宽比例,以及斜边长度就可算得当前屏幕的尺寸。一块显示屏显示屏幕的

    2024年02月09日
    浏览(59)
  • 手机怎么提高图片分辨率?手机怎么改照片分辨率dpi?

    现在有很多考试可以通过手机提交报名,在报名时需要上传证件照,但是最近有很多小伙伴说上传的照片尺寸、背景颜色都符合要求了但是还是提示上传失败,那么这种情况往往就是由于照片分辨率不符合要求导致的,那么手机怎么提高图片分辨率呢?今天来给大家分享一款

    2024年02月16日
    浏览(57)
  • 【视频超分辨率】视频超分辨率的介绍(定义,评价指标,分类)

    视频超分率起源于图像超分率,旨在根据已有的低分辨率视频序列生成具有真实细节和内容连续的高分辨率视频序列。视频超分辨率技术可以将 低分辨率(低清晰度)视频转换为高分辨率(高清晰度)视频 ,以提供更多的细节和清晰度。 视频超分辨率技术主要分为 传统方法

    2024年02月04日
    浏览(49)
  • Flutter如何获取屏幕的分辨率和实际画布的分辨率

    在Flutter中,你可以使用MediaQuery来获取屏幕的分辨率和实际画布的分辨率。 要获取屏幕的分辨率,你可以使用MediaQuery.of(context).size属性,它返回一个Size对象,其中包含屏幕的宽度和高度。下面是一个获取屏幕分辨率的例子: 要获取实际画布的分辨率,你可以使用MediaQuery.of

    2024年02月09日
    浏览(49)
  • 照片怎么改像素分辨率?照片分辨率怎么调成300dpi?

    照片分辨率怎么更改?一般在打印照片时经常会遇到对照片dpi有要求,如果达不到要求的数值就需要提高照片分辨率,我们电脑上的图片大部分是96dpi,在打印时经常需要300dpi,那么照片分辨率怎么调成300dpi?下面给大家推荐一款在线 修改分辨率 工具,操作简单,下面一起来

    2024年02月16日
    浏览(51)
  • Arch Linux高分辨率屏幕设置分辨率及dpi缩放

    由于笔记本原生屏幕分辨率太渣,于是购入一块2440x1400、14英寸副屏。窗口管理器为dwm,使用 startx 命令进入环境 注 :此文不会改变tty的设置,仅设置xorg下某用户的个人设置 关闭笔记本屏幕,只使用副屏 副屏分辨率设置为最高,且屏幕缩放设置为合适大小 高分辨率小屏幕导致

    2024年02月05日
    浏览(65)
  • 图片1920x1080分辨率怎么调 ?图片如何修改分辨率?

    图片是我们日常生活中经常需要使用到的东西,但是在使用图片时我们会遇到需要调图片分辨率的情况,有很多小伙伴对于图片分辨率这个概念并不了解,今天就来为大家具体介绍一下图片1920x1080怎么调以及怎么给图片 修改分辨率 ,下面一起来看一下吧。 图片1920x1080分辨率

    2024年02月16日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包