[ElemeFE/element][Bug Report] el-dialog中嵌套的table,使用fixed="right" 当所有column的宽度之和 < table的宽度时,fixed 区域的高度不正确

2024-08-20 343 views
0
Element UI version

2.11.1

OS/Browsers version

win10 x64 / chrome 76.0.3809.100

Vue version

2.6.10

Reproduction Link

https://codepen.io/hualvm/pen/ZEzLJEm

Steps to reproduce

1、点开重现链接 2、浏览器处于最大化 1920 3、点击对话框,(此时正常) 4、关闭对话框,再次点击打开,(bug出现,看下table右下角多了一条线) 【此bug 出现在2.10.0 以上版本,经测试2.9.2版本是正常的】

What is Expected?

fiex区域的border-bottom 要与table的边框重叠

What is actually happening?

不重叠

回答

1

我也遇到了类似问题,table左右两边有固定列时, 切换顶部tabs, 再回到当前页时,固定列区域样式有错乱。如下图: image 测试发现, column 宽度, 使用 width , 将当前页面撑满,并出现滚动条时,就不会出现。 该问题,在2.8.2之前的版本,都没有出现.

1

本机上无法出现。录制一段视频吧。看一下你的操作。

3

我也遇到了类似问题,table左右两边有固定列时, 切换顶部tabs, 再回到当前页时,固定列区域样式有错乱。如下图: image 测试发现, column 宽度, 使用 width , 将当前页面撑满,并出现滚动条时,就不会出现。 该问题,在2.8.2之前的版本,都没有出现.

@yinboxie 能稳定重现的,新开一个 issue,并提供 demo。

9

用了fixed='right'改变窗口大小之后,高度与table高度不一致,必现 image

9

用了fixed='right'改变窗口大小之后,高度与table高度不一致,必现 image

还是无法重现。先关闭了。

1

我也出现了这个情况 ,缩放浏览器的时候出现

7

.el-tablefixed, .el-tablefixed-right { min-height: 100% !important; } &.el-table--fit { overflow-y: hidden; } &.el-table--scrollable-x { .el-tablefixed, .el-tablefixed-right { min-height: auto !important; } }

7

我用了以上css 代码覆盖 element 处理的高度问题,以免其卡在宽度临界点来回跳动; 不过这样的弊端是 el-table不能设置固定高度

7

el-table 上加上 class="tableClass" 然后添加样式

.tableClass {
  /deep/ .el-table__fixed-right {
    height: calc(100% - 11px) !important; //设置高优先,以覆盖内联样式
  }
  /deep/ .el-table__fixed-right::before {
    height: 0px !important; //设置高优先,以覆盖内联样式
  }
}
1

遇到个诡异的问题 , 当 设置 横向纵向滚动条 宽度不一致时 , 滚动到超出一屏 错位 , 折腾了好久 , 样式排查 总是差 纵向滚动条那个 高度 , 百思不得其解 , 最后 , 横纵滚动条 改成同样 宽度 , 问题解决 /die

1

2.15版本也有这个问题。你们解决了吗