当前位置: 首页 > 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;}
}

相关文章:

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

异常点: 界面显示不完整,表格卡顿,界面已经刷新完成,但是表格的宽度还在一点一点变化,甚至有无线延伸的情况 思路: 1. 使用doLayout 这里官方文档有说明, 所以我的想法是,监听浏览…...

六、Kafka-Eagle监控

目录 6.1 MySQL 环境准备6.2 Kafka 环境准备6.3 Kafka-Eagle 安装 6.1 MySQL 环境准备 Kafka-Eagle 的安装依赖于 MySQL,MySQL 主要用来存储可视化展示的数据 6.2 Kafka 环境准备 修改/opt/module/kafka/bin/kafka-server-start.sh 命令 vim bin/kafka-server-sta…...

DBeaver 23.1.5 发布

导读DBeaver 是一个免费开源的通用数据库工具,适用于开发人员和数据库管理员。DBeaver 23.1.5 现已发布,更新内容如下. Data editor 重新设计了词典查看器面板 UI 空间数据类型:曲线几何线性化已修复 数据保存时结果选项卡关闭的问题已解决…...

三种垃圾收集算法,优缺点分析,设计垃圾收集

文章目录 垃圾收集算法标记-清除(基础收集算法)标记-复制(新生代)标记-整理(老年代) 垃圾收集算法 标记-清除(基础收集算法) 首先标记出所有需要回收的对象,在标记完成后…...

【链表OJ 10】环形链表Ⅱ(求入环节点)

前言: 💥🎈个人主页:​​​​​​Dream_Chaser~ 🎈💥 ✨✨刷题专栏:http://t.csdn.cn/UlvTc ⛳⛳本篇内容:力扣上链表OJ题目 目录 leetcode142. 环形链表 II 1.问题描述 2.代码思路 3.问题分析 leetcode142. 环形链…...

RT-Thread在STM32硬件I2C的踩坑记录

RT-Thread在STM32硬件I2C的踩坑记录 0.前言一、软硬件I2C区别二、RT Thread中的I2C驱动三、尝试适配硬件I2C四、i2c-bit-ops操作函数替换五、Attention Please!六、总结 参考文章: 1.将硬件I2C巧妙地将“嫁接”到RTT原生的模拟I2C驱动框架 2.基于STM32F4平台的硬件I…...

小白学Go基础01-Go 语言的介绍

Go 语言对传统的面向对象开发进行了重新思考,并且提供了更高效的复用代码的手段。Go 语言还让用户能更高效地利用昂贵服务器上的所有核心,而且它编译大型项目的速度也很快。 用 Go 解决现代编程难题 Go 语言开发团队花了很长时间来解决当今软件开发人员…...

Spring工具类--Assert的使用

原文网址:Spring工具类--Assert的使用_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍Spring的Assert工具类的用法。 Assert工具类的作用:判断某个字段,比如:断定它不是null,如果是null,则此工具类会报…...

无涯教程-Android - Absolute Layout函数

Absolute Layout 可让您指定其子级的确切位置(x/y坐标),绝对布局的灵活性较差且难以维护。 Absolute Layout - 属性 以下是AbsoluteLayout特有的重要属性- Sr.NoAttribute & 描述1 android:id 这是唯一标识布局的ID。 2 android:layout_x 这指定视图的x坐标…...

2018ECCV Can 3D Pose be Learned from2D Projections Alone?

摘要 在计算机视觉中,从单个图像的三维姿态估计是一个具有挑战性的任务。我们提出了一种弱监督的方法来估计3D姿态点,仅给出2D姿态地标。我们的方法不需要2D和3D点之间的对应关系来建立明确的3D先验。我们利用一个对抗性的框架,强加在3D结构…...

干旱演变研究:定义及研究方法

在水文系统中,每个组分之间互相关联,包气带水、地下水和河川径流相互响应,水文循环处于动态平衡的状态。 降水作为水文系统的输入量,对水文循环具有重要的影响。降水短缺通过水文循环导致水文系统不同组分(包气带、地下水和地表水)发生干旱,降水不足导致土壤含水量减少,…...

【LeetCode-中等题】114. 二叉树展开为链表

文章目录 题目方法一:前序遍历(构造集合) 集合(构造新树)方法二:原地构建方法三:前序遍历--迭代(构造集合) 集合(构造新树) 题目 方法一&#x…...

【题解】JZOJ6645 / 洛谷P4090 [USACO17DEC] Greedy Gift Takers P

洛谷 P4090 [USACO17DEC] Greedy Gift Takers P 题意 n n n 头牛排成一列,队头的奶牛 i i i 拿一个礼物并插到从后往前数 c i c_i ci​ 头牛的前面,重复无限次,问多少奶牛没有礼物。 题解 发现若一头牛无法获得礼物,那么它后…...

Vue 项目中的错误如何处理的?

1、 组件中的处理:使用 errorCaptured 钩子 作用:可以捕获来自后代组件的错误 父组件(errorCaptured) -> 子组件 (errorCaptured) -> 当孙子组件出错时,错误会一直向上抛,也就是先触发子组件的 errorCaptured,…...

网络分层的真实含义

复杂的程序都要分层,这是程序设计的要求。比如,复杂的电商还会分数据库层、缓存层、Compose 层、Controller 层和接入层,每一层专注做本层的事情。 当一个网络包从一个网口经过的时候,你看到了,首先先看看要不要请进来…...

RT-Thread 线程间同步

线程间同步 在多线程实时系统中,一项工作的完成往往可以通过多个线程协调的方式共同来完成,那么多个线程之间如何 “默契” 协作才能使这项工作无差错执行?下面举个例子说明。 例如一项工作中的两个线程:一个线程从传感器中接收…...

Python元类再解释

Python元类再解释 元类是什么? 你可以把元类看作是“生产类的工厂”。就像类是用来生产对象的,元类是用来生产类的。 为什么需要元类? 考虑一个场景:假设你正在编写一个框架,你希望框架中的所有类都有某些特定的方…...

常用的Spring Boot 注解及示例代码

简介:Spring Boot 是一个用于快速构建基于 Spring 框架的应用程序的工具,通过提供一系列的注解,它使得开发者可以更加轻松地配置、管理和控制应用程序的各种行为。以下是一些常用的 Spring Boot 注解,以及它们的功能和示例代码&am…...

react app教程

react app教程 环境准备 下载node 下载npx npm install npx创建app npx create-react-app automedia cd automedia npm start构建发布版本 npm run build安装调试工具 # .vscode/launch.json {// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了…...

在vue项目中用vue-watermark快捷开发屏幕水印效果

我们先引入一个第三方依赖 npm install vue-watermark然后 因为这只是个测试工具 我就直接代码写 App.vue里啦 参考代码如下 <template><div><vue-watermark :text"watermarkText"></vue-watermark><!-- 正常的页面内容 --></div…...

别再傻傻分不清L2和L3了!一张图看懂自动驾驶分级(附SAE/国标对照表)

自动驾驶分级全解析&#xff1a;从L0到L5的技术演进与商业应用 当特斯拉车主开启Autopilot功能在高速公路上行驶&#xff0c;或是蔚来汽车宣传其NOP领航辅助时&#xff0c;这些究竟属于什么级别的自动驾驶&#xff1f;为什么有些厂商称自己的系统为"L2.999"&#xff…...

Seaborn可视化从入门到精通:风格设置、调色板与常用图表详解

Seaborn可视化 Seaborn的介绍 简介 ​  Seaborn 是以 matplotlib为底层&#xff0c;更容易定制化作图的Python库。官网http://seaborn.pydata.org/ ​  Seaborn其实是在matplotlib的基础上进行了更高级的API封装&#xff0c;从而使得作图更加容易。在大多数情况下使用Seabo…...

告别丢包!手把手教你用Vivado/PLL调优RTL8211的RXC时钟相位(FPGA千兆以太网篇)

FPGA千兆以太网时序优化实战&#xff1a;用PLL驯服RTL8211的RXC时钟相位 当你在调试FPGA与RTL8211千兆以太网PHY芯片的RGMII接口时&#xff0c;是否遇到过这样的场景&#xff1a;硬件连接一切正常&#xff0c;链路也能正常建立&#xff0c;但就是会随机出现数据包丢失或CRC校验…...

从游戏地图切割到3D模型生成:凸多边形三角剖分在Unity/C++中的实战应用

从游戏地图切割到3D模型生成&#xff1a;凸多边形三角剖分在Unity/C中的实战应用 在游戏开发中&#xff0c;我们经常需要处理复杂的几何形状。无论是为开放世界游戏创建导航网格&#xff0c;还是为3D模型生成优化的三角面片&#xff0c;凸多边形的三角剖分都是核心技能之一。不…...

从‘管理模式’到‘监听模式’:一张无线网卡在Kali Linux下的四种工作模式详解与切换实战

从‘管理模式’到‘监听模式’&#xff1a;一张无线网卡在Kali Linux下的四种工作模式详解与切换实战 当你第一次在Kali Linux中插入无线网卡时&#xff0c;它默认处于"管理模式"——就像普通笔记本电脑连接WiFi一样温顺。但在这张小小的硬件里&#xff0c;其实藏着四…...

PEMS交通数据实战:用Python从原始TXT到可视化分析的完整Pipeline

PEMS交通数据实战&#xff1a;用Python构建端到端分析管道的深度指南 当清晨第一缕阳光洒在加州高速公路上&#xff0c;数以万计的感应器已经开始悄无声息地记录着每辆车的轨迹。这些来自PEMS(Performance Measurement System)的海量数据&#xff0c;正等待着被转化为改善城市交…...

核控卡件综合测试平台

1&#xff09;系统简介核控卡件综合测试平台具备DI、DO、AI、AO四类IO信号的采集/输出功能以及串口、网口的通信功能&#xff0c;主要用于对综合测试平台及样机的功能测试提供支撑。综合测试平台集成测试设备的对外总线接口&#xff0c;主要包括RS422、以太网、AI、AO、DI、DO等…...

AI 时代,软件正在从 “为人设计” 转向 “为 Agent 设计”

软件&#xff0c;正在迎来它的第二张界面。 第一张是给人用的&#xff1a;图形界面、点击交互、视觉导航。过去三十年&#xff0c;所有软件的设计逻辑都建立在一个从未被明说的前提上——使用者是人&#xff0c;靠眼睛判断&#xff0c;靠手操作。 AI Agent 打破了这个前提。它…...

考前终极口诀合集,30秒过一遍

考前最后冲刺&#xff0c;别再翻教材了&#xff01;把所有核心口诀集中在一起&#xff0c;科科过软考培训对系统集成项目管理工程师考前冲刺从头到尾过一遍&#xff0c;30秒搞定&#xff0c;能掌握不少必会知识点。一、挣值与关键路径——计算题的铁口诀挣值分析口诀&#xff1…...

Perplexity文化新闻搜索效率翻倍:从冷启动到高信噪比输出的7个被低估的底层参数配置

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Perplexity文化新闻搜索效率翻倍&#xff1a;从冷启动到高信噪比输出的7个被低估的底层参数配置 Perplexity 的文化新闻检索能力并非仅由模型规模或训练数据量决定&#xff0c;其真实效能高度依赖于七个常被忽…...