首页 > 其他分享 > 笔记 | element table show-overflow-tooltip 位置偏移的问题

笔记 | element table show-overflow-tooltip 位置偏移的问题

时间:2023-09-05 16:34:44浏览次数:44  
标签:show 元素 transform tooltip element 偏移 table 属性

一、问题

因为我目前的项目是微前端的工程,最外层有一个50px的通用头部,所以页面要减去50px。所有页面看似都很完美,但是使用 el-table-columnshow-overflow-tooltip 属性时,tooltip 会向下偏移 50 px。

想到的解决办法:

  1. 按照 el-tooltip 的属性更改 placement="right" 能解决。但是表格下没办法设置这个属性。
  2. 全局样式覆盖。因为 element 的 tooltip 都是会统一放到 <div id="el-popper-container-xxxx"></div> 统一修正偏移就好了。但是 table 下的 tooltip 是在 .el-table 这个div中,还需要单独修正。

实际解决方法

因为以上两种都不好实现,所以需要另辟蹊径,看到 table 下的 tooltip 是 fixed 定位。

position: fixed

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

二、解决方案

当元素祖先的 transform、perspective、filterbackdrop-filter 属性非 none 时,容器由视口改为该祖先。

给父元素加上 transform: scale(1) 或者是别的,只要transform 的属性不是none就行
(会产生副作用, 会影响其他的定位)

// 防止表格 tooltip 偏移
.el-table {
  transform: scale(1);
}

标签:show,元素,transform,tooltip,element,偏移,table,属性
From: https://www.cnblogs.com/inslog/p/17680016.html

相关文章

  • element table 表格控件实现单选功能
      <el-table:data="tableData"borderstriperef="tableData"@row-click="singleElection"><el-table-columnlabel=""width="65"><templateslot-scope="......
  • $('.panel-collapse').on('show.bs.collapse', function () {})详解
    $('.panel-collapse').on('show.bs.collapse',function(){});这段代码是在使用jQuery来绑定事件。$('.panel-collapse')部分是一个选择器,它选择了当前页面上所有有panel-collapse这个类的元素。如果你在HTML中有这样的元素:<divclass="panel-collapse"></div>,那么这......
  • 今天练习element组件的时候,引入element样式和脚本文件以及vue的组件之后,导入简单eleme
    2023-09-04今天练习element组件的时候,引入element样式和脚本文件以及vue的组件之后,导入简单element组件练习之后,查看组件的时候,样式一直出不来,经过我多次排查,终于发现,导入的三个内容是有顺序排序要求的。必须先导入vue,然后再导入其他的两个。<!DOCTYPEhtml><htmllang="en">......
  • Vue 3 之 Element Plus 之 Pagination 的 坑
    版本信息:vue.js3.3.4ElementPlus2.3.12浏览器ChromeVersion116-- 坑描述试验ElementPlus之分页时,出现了异常——之前开发的弹窗打不开了。 Pagination分页:https://element-plus.org/zh-CN/component/pagination.html 在页面加里了一些弹窗(对话框):<el-......
  • Vue element 表格跨行合并单元格
    1、定义table.js/***生成表格合并行坐标阵列rowspan、colspan信息*@param{表格数据}tableData*@param{合并列字段}mergeColumnsexample:["filed1",[filed2]]*@returns坐标阵列*/exportfunctiongetTableSpanMap(tableData,mergeColumns){varspa......
  • 20230529 java.lang.reflect.AnnotatedElement
    介绍java.lang.reflect.AnnotatedElementpublicinterfaceAnnotatedElementAPIisAnnotationPresentgetAnnotationgetAnnotationsgetAnnotationsByTypegetDeclaredAnnotationgetDeclaredAnnotationsByTypegetDeclaredAnnotations......
  • .Net+vue+Element 七牛云上传
    API安装官方文档:developer.qiniu.com/kodo/1237/c…Nuget搜索安装 Qiniu Bucket储存空间名bucket接口文档:developer.qiniu.com/kodo/3941/t…stringBucket="image";//七牛云储存空间的名字stringAccessKey="VuDqYiw8qQobmajri.......";stringSecretKey......
  • element-ui 的下拉树
    我了解到在element-ui中并没有下拉树这个组件,所以只能用<el-select>组件和<el-tree>结合来实现1、html<scriptsrc="../resources/js/vue.js"></script><scriptsrc="../resources/js/element-ui/index.js"></script><linkhref="......
  • elementui el-select设置默认值且默认值不允许删除
    参考网址:【记录】el-select已选项禁止删除el-select编辑时已选择的项不允许删除、element-ui里面的下拉多选框el-select时,默认值不可删除在项目中el-select设置默认值且默认值不允许删除和取消选中通过vue全局指令实现该要求exportdefault{ update(el,bindings){ ......
  • elementui 长表单验证滚动到首个错误位置
    this.$refs['form'].validate(valid=>{if(valid){//验证通过}else{//验证失败this.$nextTick(()=>{letisError=document.getElementsByClassName('is-error') isError[0].......