elementUI表格中气泡位置偏移

1、气泡位置偏移这个问题出现，是由于，需求要求打破了常规模式，要求“elementUI表格内容根据高度来判断是否显示气泡”，这时候我们会发现，气泡在底层代码中是以实际高度的位置来判断气泡显示的位置，而不是以我们在样式中设置的height这个判断。
“elementUI表格内容根据高度来判断是否显示气泡” 这个需求的实现见文章 https://blog.csdn.net/CuiCui_web/article/details/106531997

由上图就可以看到，这个问题的根本原因就是上面说的，底层中是以实际高度来判断显示气泡。看过elementUI表格内容根据高度来判断是否显示气泡”
这篇文章你就知道实现这里的气泡，是利用的插槽。这时候，我们只需要在原来基础上加一层结构就可以啦，然后结构上加一个class,编写公共样式，就可以解决这个底层的缺陷问题，

<div class="slot-tooltip-div">这里放表格单元显示的内容
</div>

样式核心代码为：

样式代码为：

//  固定8行高度超出显示气泡end
/deep/ .el-table.testHeightTip8Row td>
.cell{max-height: 184px !important;line-height: 23px;vertical-align: middle;white-space: pre-wrap;text-align: left;// 插槽气泡位置问题处理.slot-tooltip-div{max-height: 184px !important;vertical-align: middle;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 8; /*可以显示的行数，超出部分用...表示 */-webkit-box-orient: vertical;}
}//  固定4行高度超出显示气泡end
/deep/ .el-table.testHeightTip4Row td>
.cell{max-height: 92px !important;line-height: 23px;vertical-align: middle;white-space: pre-wrap;text-align: left;// 插槽气泡位置问题处理.slot-tooltip-div{height: 92px;vertical-align: middle;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4; /*可以显示的行数，超出部分用...表示 */-webkit-box-orient: vertical;}
}

2、当我们快速切换tab或者菜单，发现，气泡会乱串，在a界面气泡出现在b界面，然后也会消失。这样用户体验非常不好。
也就是下面这个bug描述

为什么会出现这个问题呢？
原因是elementUI底层是用js挂在气泡在body中，每次鼠标移入，都只是通过通过display来控制显示隐藏，实际DOM中还有气泡节点，快速操作过程中，这里display偶现为block的情况，就出现这个bug。
目前系统中涉及本次需求的气泡，是用的v-if控制，传统模式v-if控制显示隐藏，会销毁DOM，但是在气泡这里没有，就是底层是运用js进行挂在

下面介绍一种思路，销毁气泡组件，可能不是最好的方法，但是目前想到的可行的方案。

我们监听路由的变化，然后在这里进行处理，移出且销毁气泡。

用这个方法会有一些副作用，不建议使用（会导致elementUI表格出的min-width属性失效）

后续有更好的方法，再持续更新

elementUI表格中气泡位置偏移相关推荐

如何设置文字的位置html5,怎么设置文字在表格中的位置
表格中的文字默认都是顶格的导致有的时候看起来特别的不美观,那么怎样才能让它们排版更加好看呢,这里详细介绍了怎么操作,让我们一起看看吧! 一.设置文字在表格中的位置在表格中添加文字后,默认的文字位置为 ...
element-ui表格中表头表内容的居中左右对齐
element-ui表格中表头表内容的居中左右对齐第一个是内容第二个是表头
elementUI表格中使用 jszip+file-saver+qrcode展示二维码以及批量下载二维码（包括过程中的坑）
需求:在elementUI表格中显示二维码,以及批量下载二维码上图: 首先我们先做好前置工作npm下载 qrcode和 jszip和file-saver, 然后qrcode我封装成一个组件sm- ...
elementui 表格中单元格自定义功能
客户相让表格的可操作空间变得更大,比如说可以修改表格内容(双击之后出现input),点击某一单元格可以弹窗等等,让一切可以需要的功能再单击单元格中实现. 其实在elementui的官方文档中也可以找到 ...
elementui表格中tip设置_Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用...
{column}) { return h( 'div',// 添加选中事件select (data) { console.log(data);}... 效果如下: 3.在表头添加一个Tooltip 我 ...
elementUI表格中动态单元格合并
关于动态单元格合并,官方文档提供的方法仅可实现相邻的两行数据合并,这里博主分享一下多行相同的数据也可以合并结构代码 <el-table:span-method="objectSpan ...
elementui表格中tip设置_VUE2.0+ElementUI2.0表格el-table：表头扩展el-tooltip
ElementUI2.0的表格的扩展: 如果要实现鼠标移到表头有注释或者弹框该怎么添加呢? 可以使用table的rander-header属性,render出一个el-tooltip文字提示而文字提 ...
MATLAB读取excel表格中指定位置的数据
>>> help xlsread xlsread - 读取 Microsoft Excel 电子表格文件此 MATLAB函数读取名为 filename的Microsoft Exce ...
html字体在表格中的位置,怎么HTML表格中的所有字体居中？
iOS sqlite 的各种操作 iOS --SQL的增加.删除.查找.修改 iOS对于数据库的操作:增加.删除.查找.修改首先需要创建一个数据库:本程序的数据库是在火狐浏览器里的插件里写的微量型数 ...

elementUI表格中气泡位置偏移

elementUI表格中气泡位置偏移相关推荐

最新文章

热门文章