首页 > 其他分享 >element-plus中的el-table组件tooltip显示错位

element-plus中的el-table组件tooltip显示错位

时间:2024-09-04 22:26:07浏览次数:13  
标签:el 元素 transform tooltip element filter table

  • 问题描述:
    element-plus组件库中的el-table组件有一个show-overflow-tooltip属性,设置为true时如果表格中数据过长就会显示一个浮动窗口就像这样
    而有时这个小浮窗会有错位的问题
    像是这样,会导致靠上的列浮窗直接越界不显示

  • 问题原因
    table 下的 tooltip 是 fixed 定位。
    position: fixed
    元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时,容器由视口改为该祖先。

  • 解决方法

点击查看代码
// 防止表格 tooltip 偏移
.el-table {
  transform: scale(1);
}
也不一定要这个样式,重要的是不能让tranform为空

当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时,容器由视口改为该祖先。
给父元素加上 transform: scale(1) 或者是别的,只要transform 的属性不是none就行

原博客链接

标签:el,元素,transform,tooltip,element,filter,table
From: https://www.cnblogs.com/prawn/p/18397419

相关文章

  • vue3.2 v-model 双向数据绑定实现
    代码实现示例子组件实现双向绑定<template><divclass="component-name"><inputtype="text":value="modelValue"@input="handleChange"/></div></template><scriptsetuplang=&qu......
  • Selector组件的用法
    文章目录知识回顾使用方法builder属性selector属性shouldRebuild属性child属性示例代码我们在上一章回中介绍了组件之间共享数据相关的内容,本章回中将继续介绍该内容.闲话休提,让我们一起TalkFlutter吧。知识回顾我们在前面章回中介绍了全局共享数据相关的内容,......
  • for Qbert sometimes we stay in lives == 0 condtion for a few frames —— baselin
    相关:baselines中环境包装器EpisodicLifeEnv的分析一直不是很理解在reinforcementleanrning算法在atari游戏的observation的交互过程中对lives和episodes的判断,为什么要有lives>0的这个要求,后来发现这个游戏的实战视频,发现这个游戏在某些情况下即使lives=0的时候,也会再允许进......
  • ElasticSearch:基本原理
    文章目录写在前面常见的概念倒排索引TermIndexStoredFieldsDocValuesSegmentLuceneLucene优化高性能高拓展性高可用Node角色分化ElasticSearchElasticSearch写入流程ElasticSearch查询流程最近在项目中用到了ElasticSearch,但只是学了一下怎么用,这里对于ElasticS......
  • 记一次代码审计之nbcio-boot从信息泄露到Getshell
    《Java代码审计》http://mp.weixin.qq.com/s?__biz=MzkwNjY1Mzc0Nw==&mid=2247484219&idx=1&sn=73564e316a4c9794019f15dd6b3ba9f6&chksm=c0e47a67f793f371e9f6a4fbc06e7929cb1480b7320fae34c32563307df3a28aca49d1a4addd&scene=21#wechat_redirect一、项目简介NBCI......
  • How to draw a simple relation graph in Python
    forward:https://martinlwx.github.io/en/how-to-draw-a-simple-relation-graph-in-python/ IntroTheprocessofdrawingasimplerelationgraphinpythoncanbebrokendowninto2steps.Defineagraph.Drawagraph.Step1.DefineagraphInthisstep,......
  • shell脚本语言基础(基础理论)
    目录一.初识shell脚本1.1shell的定义1.2shell的分类1.3shell脚本的使用场景 2.shell脚本的详细配置 2.1shell的特性2.2脚本的调用形式2.3读取顺序2.4shell脚本中的快捷键2.5关于通配符2.6shell脚本的编写规范2.7变量的类型一.初识shell脚本1.1shell的定义......
  • [Paper Reading] Sapiens: Foundation for Human Vision Models
    名称link时间:24.08机构:MetaRealityLabsTL;DR放出一个human-centric视觉任务的fundationmodel,该模型在3亿样本(Humans-300M)上进行无监督预训练,实验证明在human-centric视觉任务(2dpose估计/深度估计/body-part-seg等)效果相对于没有预训练有明显提升。MethodHuman300M数......
  • 春秋云镜 Delivery
    上来先扔fscan去扫一下发现开放ftp服务允许匿名登录.登录发现存在一个pom.xml文件,内容如下<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"......
  • Panel面板设计
    Panel面板是为总线仿真提供图形化界面。用户可以在面板上添加合适的控件,实时的改变信号或者变量的值常见的面板信号值交互类的控件1.开关控件Button2.checkbox锁定当前状态,和button相似,但是button只有在按住的时候才改变,无法将状态锁住。例如:打开左转向灯,一直开3.Com......