elementui table 在浏览器分辨率变化的时候界面异常
异常点:
- 界面显示不完整,
- 表格卡顿,界面已经刷新完成,但是表格的宽度还在一点一点变化,甚至有无线延伸的情况
思路:
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…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成:MAC头部frame bodyFCS,其中MAC是固定格式的,frame body是可变长度。 MAC头部有frame control,duration,address1,address2,addre…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...
【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)
可以使用Sqliteviz这个网站免费编写sql语句,它能够让用户直接在浏览器内练习SQL的语法,不需要安装任何软件。 链接如下: sqliteviz 注意: 在转写SQL语法时,关键字之间有一个特定的顺序,这个顺序会影响到…...
如何将联系人从 iPhone 转移到 Android
从 iPhone 换到 Android 手机时,你可能需要保留重要的数据,例如通讯录。好在,将通讯录从 iPhone 转移到 Android 手机非常简单,你可以从本文中学习 6 种可靠的方法,确保随时保持连接,不错过任何信息。 第 1…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版,柱状图PPT模版,线状图PPT模版,折线图PPT模版,饼状图PPT模版,雷达图PPT模版,树状图PPT模版 图表类系列各种样式PPT模版分享:图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
优选算法第十二讲:队列 + 宽搜 优先级队列
优选算法第十二讲:队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议,专门用于在数字音频设备之间传输数字音频数据。它由飞利浦(Philips)公司开发,以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...
用鸿蒙HarmonyOS5实现中国象棋小游戏的过程
下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...
