当前位置: 首页 > 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…...

ARMv8汇编指令实战解析:adrp、adr与adr_l在Linux内核启动中的应用

1. ARMv8寻址指令家族概览 在ARMv8架构中&#xff0c;adrp、adr和adr_l这三个指令堪称地址计算的"三剑客"。它们虽然名字相似&#xff0c;但各自有着独特的设计哲学和应用场景。就像搬家时选择不同的交通工具——adr是短途搬运的小推车&#xff0c;adrp是能承载重物的…...

保姆级教程:用PtitPrince的RainCloud函数,5步搞定分组数据可视化

5步精通RainCloud Plot&#xff1a;用PtitPrince实现专业级分组数据可视化 第一次看到同事用雨云图展示A/B测试结果时&#xff0c;我被这种"既见森林又见树木"的呈现方式震撼了——左侧的密度曲线如山脉般起伏&#xff0c;中间的箱线图标出关键分位点&#xff0c;右侧…...

OFA视觉蕴含模型效果展示:抽象艺术作品与评论文本关联性

OFA视觉蕴含模型效果展示&#xff1a;抽象艺术作品与评论文本关联性 1. 引言&#xff1a;当抽象艺术遇见智能理解 想象一下这样的场景&#xff1a;你站在一幅抽象画前&#xff0c;画布上是狂放的笔触和难以名状的色彩组合。旁边有人评论说&#xff1a;"这幅画表达了宇宙…...

开源工具SMUDebugTool:系统优化与性能调优的终极解决方案

开源工具SMUDebugTool&#xff1a;系统优化与性能调优的终极解决方案 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https:/…...

阿里语音识别模型WebUI实战:一键部署,会议录音秒变文字稿

阿里语音识别模型WebUI实战&#xff1a;一键部署&#xff0c;会议录音秒变文字稿 1. 引言&#xff1a;语音转文字的高效解决方案 在日常工作中&#xff0c;会议录音转文字是一项耗时又枯燥的任务。传统的人工听写方式不仅效率低下&#xff0c;还容易出错。现在&#xff0c;借…...

Windows 11系统优化新方案:Win11Debloat工具全方位性能提升指南

Windows 11系统优化新方案&#xff1a;Win11Debloat工具全方位性能提升指南 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本&#xff0c;用于从Windows中移除预装的无用软件&#xff0c;禁用遥测&#xff0c;从Windows搜索中移除Bing&#xff0c;以及执行各种其他更改…...

看完就会:高效论文写作全流程AI论文平台推荐(2026 最新)

论文写作全流程可拆解为文献调研→选题/开题→大纲/初稿→文献综述→降重/去AI味→润色/格式→查重/投稿七大环节&#xff0c;以下2026年AI论文平台按环节精准匹配&#xff0c;兼顾中文适配、降重能力、去AI痕迹、学术合规四大核心需求&#xff0c;覆盖免费/付费、通用/垂直场景…...

SunnyUI的UITreeView控件实战:从拖拽到动态加载的完整指南

SunnyUI的UITreeView控件实战&#xff1a;从拖拽到动态加载的完整指南 在企业级应用开发中&#xff0c;树形结构数据展示几乎是每个.NET开发者都会遇到的场景。传统的WinForms TreeView控件虽然基础功能完善&#xff0c;但在现代UI体验和开发效率上逐渐显得力不从心。SunnyUI框…...

OCS2与Pinocchio联调避坑指南:如何让机械臂MPC求解速度提升3倍?

OCS2与Pinocchio联调避坑指南&#xff1a;如何让机械臂MPC求解速度提升3倍&#xff1f; 在工业机械臂控制领域&#xff0c;实时模型预测控制&#xff08;MPC&#xff09;的求解效率直接决定了系统的响应速度与稳定性。OCS2作为ETH Zurich开发的高性能MPC求解器&#xff0c;结合…...

保姆级教程:用C语言数组扫描法,搞定智能车摄像头识别赛道‘L型’拐点

智能车竞赛实战&#xff1a;C语言数组扫描法精准识别L型赛道拐点 在智能车竞赛的赛道上&#xff0c;L型拐点往往是让许多参赛队伍"翻车"的关键节点。传统横向巡线算法在这里容易丢失赛道边界&#xff0c;而基于纵向扫描的数组分析法却能像手术刀般精准定位特征点。本…...