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.mzph.cn/news/54382.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jetbrains IDE新UI设置前进/后退导航键

背景 2023年6月,Jetbrains在新发布的IDE(Idea、PyCharm等)中开放了新UI选项,我们勾选后重启IDE,便可以使用这一魔性的UI界面了。 但是前进/后退这对常用的导航键却找不到了,以前的设置方式(Vi…

【C++】容器适配器stack、queue以及deque容器

🏖️作者:malloc不出对象 ⛺专栏:C的学习之路 👦个人简介:一名双非本科院校大二在读的科班编程菜鸟,努力编程只为赶上各位大佬的步伐🙈🙈 目录 前言一、什么是容器适配器1.1 stack的…

Redis 的混合持久化

RDB 相比于 AOF,数据恢复的速度更快,因为是二进制数据,直接加载进内存即可,但是 RDB 的频率不好把握。 如果频率太低,在两次快照期间服务器发生宕机,可能会丢失较多的数据如果频率太高,频繁写入…

研磨设计模式day12迭代器模式

目录 场景 解决方案 解决思路 代码示例 代码改造 Java实现迭代器 迭代器模式的优点 思考 何时选用 场景 大公司收购了一个小公司,大公司的工资系统采用List来记录工资列表,而小公司是采用数组,老板希望通过决策辅助系统来统一查看…

Android studio之GridView使用

目录 效果图:![在这里插入图片描述](https://img-blog.csdnimg.cn/86e4a48a71164dec82613d58b1fbaa1c.jpeg)代码: 效果图: 代码: UserGridviewAdapter package com.example.gridviewpro.Adapter;import android.content.Contex…

202 | 抽象类、接口、内部类

抽象类 abstract 注意项 父类方法需要声明,但是有不确定性,考虑将该方法设计为抽象方法抽象方法没有实现的方法没有方法体(跟接口的区别?)抽象方法的类必须设置为抽象类,实现方法由其子类实现 abstract …

nuxt.js框架使用swiper的5.4.5版本记录,创建广告位幻灯片

nuxt依赖 “nuxt”: “^2.15.8”, “swiper”: “^5.4.5”, “vue”: “^2.7.10”, “vue-awesome-swiper”: “^4.1.1”, 需要完成的效果是 参考地址&#xff1a;https://3.swiper.com.cn/demo/pcSlide/ nuxt代码&#xff1a; <template><div class"page&quo…

ServiceManger Binder的处理流程

陌生知识点如下&#xff1a; BinderProxy&#xff1a;是将Native层的BpBinder对象进行封装后传给Java层使用的Binder对象android_util_binder: Binder在JNI层的相关注册&#xff0c;处理&#xff0c;转换封装接口BpBinder:Binder驱动在Native层的封装。IPCThreadState&#xf…

机器学习的测试和验证(Machine Learning 研习之五)

关于 Machine Learning 研习之三、四&#xff0c;可到秋码记录上浏览。 测试和验证 了解模型对新案例的推广效果的唯一方法是在新案例上进行实际尝试。 一种方法是将模型投入生产并监控其性能。 这很有效&#xff0c;但如果你的模型非常糟糕&#xff0c;你的用户会抱怨——这…

Sentinel 控制台(集群流控管理)

规则配置 要通过 Sentinel 控制台配置集群流控规则&#xff0c;需要对控制台进行改造。我们提供了相应的接口进行适配。 从 Sentinel 1.4.0 开始&#xff0c;我们抽取出了接口用于向远程配置中心推送规则以及拉取规则&#xff1a; DynamicRuleProvider<T>: 拉取规则Dy…

jvm开启远程调试功能;idea远程debug

概述 有时候一些问题本地调试无法复现&#xff0c;这个时候可以开启jvm的远程调试功能 jar包启动 jdk8 java -agentlib:jdwptransportdt_socket,address8787,servery,suspendn -jar xxx.jarjdk11/17 java -agentlib:jdwptransportdt_socket,address*:8787,servery,suspe…

关于ios Universal Links apple-app-site-association文件 Not Found的问题

1. 背景说明 1.1 Universal Links 是什么 Support Universal Links 里面有说到 Universal Links 是什么、注意点、以及如何配置的。简单来说就是 当您支持通用链接时&#xff0c;iOS 用户可以点击指向您网站的链接&#xff0c;并无缝重定向到您安装的应用程序 大白话就是说&am…

APP爬虫之-Protobuf协议逆向解析

在做APP抓取时&#xff0c;会发现有的APP Response回来的数据有“加密”。不知道返回的内容是什么。 如下&#xff1a; 如上&#xff0c;内容不是明文的&#xff0c;没办法解析数据。APP常见的对数据加密有三种情况&#xff1a;第一种是&#xff0c;用诸如AES这类加密算法对数…

R语言绘图相关函数(含实例)

目录 plot:可用于创建多种类型的图形 dev.new():新建画板 hist&#xff1a;绘制直方图 dotchart&#xff1a;绘制点图的函数 pie:绘制饼图 pair&#xff1a;绘制散点图矩阵 boxplot&#xff1a;绘制箱线图 scatterplot3D&#xff1a; 绘制三维散点图 par&#xff1a;修…

【动态规划】1137. 第 N 个泰波那契数

Halo&#xff0c;这里是Ppeua。平时主要更新C&#xff0c;数据结构算法&#xff0c;Linux与ROS…感兴趣就关注我bua&#xff01; 文章目录 0. 题目解析1.算法原理1.1 状态表示1.2 状态转移方程1.3初始化1.4 填表顺序1.5 返回值 2.算法代码 &#x1f427; 本篇是整个动态规划的…

【八股】2023秋招八股复习笔记4(MySQL Redis等)

文章目录 目录1、MySQLmysql索引实现mysql索引优化mysql索引失效的情况mysql 千万数据优化mysql 事务隔离级别 & 实现原理mysql MVCC版本链&#xff08;undo log&#xff09;mysql数据同步机制 & 主从复制 &#xff08;binlog&#xff09;mysql 日志&数据恢复&…

Springboot开发所遇问题(持续更新)

SpringBoot特征&#xff1a; 1. SpringBoot Starter&#xff1a;他将常用的依赖分组进行了整合&#xff0c;将其合并到一个依赖中&#xff0c;这样就可以一次性添加到项目的Maven或Gradle构建中。 2,使编码变得简单&#xff0c;SpringBoot采用 JavaConfig的方式对Spring进行配置…

3D姿态相关的损失函数

loss_mpjpe: 计算预测3D关键点与真值之间的平均距离误差(MPJPE)。 loss_n_mpjpe: 计算去除尺度后预测3D关键点误差(N-MPJPE),评估结构误差。 loss_velocity: 计算3D关键点的速度/移动的误差,评估运动的平滑程度。 loss_limb_var: 计算肢体长度的方差,引导生成合理的肢体长度…

Redis通信协议

文章目录 Redis通信协议RESP协议数据类型 模拟Redis客户端 Redis通信协议 RESP协议 Redis是一个CS架构的软件&#xff0c;通信一般分为两步(不包含pipeline和PubSub)&#xff1a; 客户端(client)向服务端(server)发送一条命令。服务器解析并执行命令&#xff0c;返回响应结果…

Java面试题—2023年8月25日—PLKJ

2023年8月25日 北京 png ln kē j 答案仅供参考&#xff0c;博主仅记录发表&#xff0c;没有实际查询&#xff0c;不保证正确性。 面试题&#xff1a; 一.选择题 1.下面哪些是不合法的标识符 A.$persons B.TwoUsers C.*point D._endline 2. 下列语句执行后&#xff0c;k的值为…