element-ui中el-table的错位问题解决,以及新的错位问题的出现(与el-tabs相关)

2023-11-06

element-ui的表格错位问题,只出现在带有设置了fixed的列的el-table中,这是一个渲染机制的问题,通过调用一遍doLayout方法就可以解决。但是套在el-tabs里的el-table,就是另一种情况了。

简单错位

这是我瞎起的名字,我想指代的是在重新渲染数据或者改变浏览器窗口尺寸(resize)造成的那种fixed列的错位。
这个问题很好解决了,给你的el-table标签加上ref属性,例如ref='tableRef',然后在触发了错位的地方比如重新查询数据、或监听resize事件的回调里执行:

this.$nextTick(()=>{
	this.$refs.table.doLayout()
})

到这里基本就可以解决常见的错位问题了,如果情况特殊$nextTick不起作用,用setTimeout试一下即可。
ps:据我观察,有横向滚动条的fixed表格是不会产生错位问题的,这还有待验证。

接着就碰到了新的情况,那就是我命名的奇葩错位了。

奇葩错位

在el-tabs里已经doLayout处理过的table,在切换标签页的时候,又错位了。
简单,在切换标签页的监听事件里再执行一次doLayout不就完了么,现实是,fixed列做了一个过渡动画动作才于主体部分对齐,让强迫症非常不开心。
经过多方面的测试,最终发现罪魁祸首就是

<el-table-column
      prop="name"
      label="姓名测试"
      min-width="70">
</el-table-column>

里边的这个min-width值!

那么解决el-table里所有错位问题的方法,其实就是,根据label值的长度调整min-width,min-width过小就会导致各种奇葩的错位,例如上边这个四个字的label,min-width="70"就会出现错位现象,设为80就没有问题了。

总结就是,根据表头文字长度、给有min-width的列设置合适的值,错位问题就解决了。至于这个问题的产生机制,有时间再去整理讨论吧。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

element-ui中el-table的错位问题解决,以及新的错位问题的出现(与el-tabs相关) 的相关文章

随机推荐

  • 全面解析大语言模型的工作原理

    当ChatGPT在去年秋天推出时 在科技行业乃至世界范围内引起了轰动 当时 机器学习研究人员尝试研发了多年的语言大模型 LLM 但普通大众并未十分关注 也没有意识到它们变得多强大 如今 几乎每个人都听说过LLM 并有数千万人用过它们 但是
  • 3D模型的渲染,这一篇就够了

    3D模型的渲染 这一篇就够了 效果图及源码 1 mapbox 2 threebox tube line logistics raycaster mercator object3D 效果图及源码 1 mapbox https docs map
  • ORACLE(student)表习题与答案

    1 查询Student表中的所有记录的Sname Ssex和Class列 SELECT sname ssex class FROM student 2 查询教师所有的单位即不重复的Depart列 SELECT distinct depart
  • 集中式日志存储架构

    Hello大家好 欢迎回来 我们今天的视频课程要讨论的内容是 AWS的集中式日志存储架构 包括集中式日志存储架构需要考虑的事项 以及使用了两个AWS账户对架构的实现做了个快速的演示 我们开始今天的内容 集中式日志存储架构 当前 在绝大多数组
  • 对话力码科技:保险科技应用有待深入,价值落地更重要

    保险行业的数字化时机已来 更加专业化的企业才能立于不败之地 数科星球原创 作者丨苑晶 编辑丨大兔 对于国内的大多数企业来说 2023年是个极为重要的年份 在软件行业 随着人工智能等新技术的日益成熟和普及 软件行业迎来黄金时代 在这种趋势下
  • 多点双向重发布

    实验题目 要求 1 两个协议间进行多点双向重发布 2 R7的环回没有宣告在OSPF协议中 而且是后期重发布进去 3 解决环路 所有路径选择最优 且存在备份 实验拓扑图 IP地址与ospf和rip的配置 R1 int g0 0 0 ip ad
  • 华为OD机试真题-计算网络信号 【2023.Q1】

    题目内容 网络信号经过传递会逐层衰减 且遇到阻隔物无法直接穿透 在此情况下需要计算某个位置的网络信号值 注意 网络信号可以绕过阻隔物 array m n 的二维数组代表网格地图 array i j 0代表i行j列是空旷位置 array i
  • 开源协议比较:BSD、Apache、GLP、LGLP、MIT

    BSD开源协议 original BSD license FreeBSD license Original BSD license BSD开源协议是一个给于使用者很大自由的协议 基本上使用者可以 为所欲为 可以自由的使用 修改源代码 也可以
  • Python报错UnicodeDecodeError: ‘gbk‘ codec can‘t decode byte的最新解决办法2022-09-30

    合并txt文件内容时候 Python报错UnicodeDecodeError gbk codec can t decode byte 这个错误是做NLP的小伙伴常见的一个错误 报错原因是读取的文件中有中文 网上找到的解决办法 将 with
  • ProtocolBuffers-3.0.0 For Objective C 的快速集成指南

    一 前言 最近调研 Google的Protocol Buffer 在网上看了几篇相关博客 发现他们讲的都比较复杂 所以就想写一篇简单点的文章 配置环境 mac OS 10 11 5 Xcode7 3 二 Protocol Buffer简介
  • 汉诺塔(Tower of Hanoi)--------递归思路

    汉诺塔问题简介 有三根相邻的柱子 标号为A B C A柱子上从下到上按金字塔状叠放着n个不同大小的圆盘 要把所有盘子一个一个移到柱子C上 并且每次移动 同一根柱子上都只能是大盘子在下 小盘子在上 请问至少需要多少次移动 汉诺塔问题分析 1
  • 剑指 Offer 57. 和为s的两个数字--双指针问题

    这道题有点像之前一道用hashmap做的乱序数组求两数之和等于指定数的问题 两数相加 时间复杂度小于 O n2 而今天这道题 用hashmap也可以做出 但是空间复杂度实在太大 又因为它是排序好的数组 所以二分法或者双指针法比较简单 双指针
  • DRF视图组件

    目录 视图 APIView APIView与View的不同之处 GenericAPIView 通用视图类 类属性 类方法 基于APIView写五个接口 基于GenericAPIVIew写5个接口 五个视图扩展类 ListModelMixin
  • c/c++位字段

    位字段 定义 位字段是C语言中一种存储结构 不同于一般结构体的是它在定义成员的时候需要指定成员所占的位数 所有基础的数据类型 最大的也不过 10 个字节 我们可以自定义的数据类型 struct 通过把若干类型组合在一起 让一种类型可以大很多
  • linux自动安装trojan客户端的shell脚本

    bin bash 安装Trojan客户端 echo 开始安装Trojan客户端 curl O https github com trojan gfw trojan releases download v1 17 0 trojan 1 17
  • Headless Browser Testing With Xvfb

    Jan 09 15 javascripttesting These days when the phrase headless browser is mentioned you immediately think of PhantomJS
  • 【Python基础】用Cython优化Python代码性能

    Cython是一个编程语言 它结合了Python的简洁性和C语言的性能 本文将深入探讨Cython的基本原理 如何将其应用于Python项目 以及如何使用Cython优化Python代码的性能 文章目录 1 Cython简介 2 Cytho
  • getopt使用样本/模板

    this is the sample of use of getopt funtion include
  • python可以进行软件开发吗,python可以做软件开发吗

    本篇文章给大家谈谈python可以进行软件开发吗 以及python可以做软件开发吗 希望对各位有所帮助 不要忘了收藏本站喔 1 python可以开发什么软件 主要可以做小程序 爬虫程序 用于系统编程等等还是很广泛的 Python的应用领域分
  • element-ui中el-table的错位问题解决,以及新的错位问题的出现(与el-tabs相关)

    element ui的表格错位问题 只出现在带有设置了fixed的列的el table中 这是一个渲染机制的问题 通过调用一遍doLayout方法就可以解决 但是套在el tabs里的el table 就是另一种情况了 简单错位 这是我瞎起