Element: [Bug Report] 当有一列是fixed时，table显示错位

[ivan403704409]

Element UI version

1.3.3

OS/Browsers version

mac os sierra/chrome 58.0.3029.110 (64-bit)

Vue version

2.3.3

Reproduction Link

https://jsfiddle.net/dqjsk1y2/

Steps to reproduce

https://jsfiddle.net/dqjsk1y2/

往下拉滚动条，到后面的数据，表格上下会有错位

What is Expected?

表格每行都对齐

What is actually happening?

往下拉滚动条，到后面的数据，表格上下会有错位

[SimGenius]

而且有时候列神奇的就第一列到最后去了

[lifanlingjue]

我也遇到这个问题了。。。 在线等 挺急的。

[weihongming]

我也遇到了，很急！！

[Leopoldthecoder]

@liril-net Any thoughts? (To reproduce this, remember to switch show scroll bar to always in system configuration)

[mcdongWang]

同一样遇到了问题 需要提供什么信息么?

[mcdongWang]

没人来处理这个问题么? @Leopoldthecoder

[liril-net]

@mcdongWang 在找一个不会影响到其它功能的解决方案

[mcdongWang]

@liril-net 在 横向 和 纵向滚动条都存在的时候 是否使用鼠标 会 影响 fixed的列头 对滚动高度的判断.

我们大量使用了table组价 而且内容都比较多 所以同时使用了 行 列 固定表头 错位的大小就是滚动条的高度

还有一个问题就是 table 的 height max-height 值 无法使用string 去指向某个css

我看你们的代码 是直接读的数字 然后加上了 'px'

[liril-net]

你是想指定什么样的值？inherit？

[mcdongWang]

@liril-net 指定一个class 让组件通过clss去读啊 我想用calc()

[wooodchen]

遇到相同的问题。

测试了下，当表格宽度刚好大于父容器一个竖向滚动条的宽度（好像都是17px）内时，会出现这个问题。

目前自己的解决方法：自定义了一个指令，来判断二者的宽度，当小于这个值时，强制将表格宽度减少一个值，可以暂时解决这个问题。

[yangehappy]

@wooodchen 你好 方便公布下代码吗 现在遇到了同样的问题 十分感谢 祝工作愉快

[geraldlrh]

没人解决？

[phcloud]

ivan403704409 的demo代码现在看已经是正常了的
然而加上show-summary之后，最后几行显示就错位了 https://jsfiddle.net/pointhalo/gkky2vy4/

[furybean]

重现的例子更新到 2.1.0 版本版本后已经无法重现： https://jsfiddle.net/dqjsk1y2/3/

[furybean]

先做关闭处理，如果还会重现，请留言，我会在确认后重开此 issue。

[llukang]

现在2.7.2版本依然哟这个问题呢，有解决方案了吗？

[baimifan2017]

各位老哥，有没有解决方案啊！为这事脑袋都弄疼了

[yy0608]

当有fixed属性时，渲染了2个table，设置第二个table水平滚动条就好了(v2.8.2)
.el-table__body-wrapper.is-scrolling-left + .el-table__fixed-right .el-table__fixed-body-wrapper {
overflow-x: scroll;
}

[kaimzhou]

watch: {
    data() {
      // 对 Table 进行重新布局
      // https://element.eleme.cn/#/zh-CN/component/table#table-methods
      this.$refs.table.doLayout();
    }
  }

[leeq404]

2.10.1版本依然有这个问题，使用this.$refs.table.doLayout()依然不能解决问题

[TY-LIU]

2.10.1版本依然有这个问题，使用this.$refs.table.doLayout()依然不能解决问题

只需要给你的列设定至少一个或一个以上的min-width就解决了，全部都是设置的width并且超出了列表的宽度，就会出现这个问题。看这个：https://jsfiddle.net/6nobuLqv/10/

[leeq404]

2.10.1版本依然有这个问题，使用this.$refs.table.doLayout()依然不能解决问题

只需要给你的列设定至少一个或一个以上的min-width就解决了，全部都是设置的width并且超出了列表的宽度，就会出现这个问题。看这个：https://jsfiddle.net/6nobuLqv/10/

之前表格高度是设置为min-height，将min-height修改为height，还有种方法是在数据填充完刷新一下数据让表格重新渲染，目前我就想到这两个方法

[aimeiyijia]

估计是各el-table-column的width相加跟屏幕分辨率不匹配的原因，可以设置一列为auto或者不设置宽度。

[xindiyang]

就没有解决办法吗

[azzlzzxz]

有没有明确的办法啊，以上办法都试过了

[XiaoWinter]

找到一个僵硬的办法
/deep/ .el-table__fixed .cell{ box-sizing: border-box ; max-height: 40px ; }

[PLQin]

vue 版本： vue2
element 版本： 2.13.0

[SLL0711]

vue 2.6.11
element-ui 2.13.2
试过上述方法，但都无效...

当启用column 锁定、column宽度自定义时 会出现问题，截图如下

[passioncsu]

反正问题还在, 其实稍微调整一下某个列的列宽什么的 就会恢复正常. 最终发现最好用的办法就是setTimeout延迟1秒做个小调整.

[luojanet]

方式1：

方式2：
:height="tableHeight"改为:max-height="tableHeight"

[SLL0711]

HI 
方式2尝试后无效

方式1 代码执行放在哪个事件中？或者你是通过定时器循环执行？

------------------ 原始邮件 ------------------
发件人: "luojanet"<[email protected]>;
发送时间: 2020年6月30日(星期二) 上午10:47
收件人: "ElemeFE/element"<[email protected]>;
抄送: "沈丽林"<[email protected]>;"Comment"<[email protected]>;
主题: Re: [ElemeFE/element] [Bug Report] 当有一列是fixed时，table显示错位 (#4976)

方式1：

方式2：
:height="tableHeight"改为:max-height="tableHeight"

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.

[luojanet]

就放在methods里面，每次请求el-table中数据的时候都会调用执行

------------------ 原始邮件 ------------------
发件人: "SLL0711"<[email protected]>;
发送时间: 2020年7月1日(星期三) 晚上9:09
收件人: "ElemeFE/element"<[email protected]>;
抄送: "luojanet"<[email protected]>;"Comment"<[email protected]>;
主题: Re: [ElemeFE/element] [Bug Report] 当有一列是fixed时，table显示错位 (#4976)

HI&nbsp;
方式2尝试后无效

方式1 代码执行放在哪个事件中？或者你是通过定时器循环执行？

------------------&nbsp;原始邮件&nbsp;------------------
发件人:&nbsp;"luojanet"<[email protected]&gt;;
发送时间:&nbsp;2020年6月30日(星期二) 上午10:47
收件人:&nbsp;"ElemeFE/element"<[email protected]&gt;;
抄送:&nbsp;"沈丽林"<[email protected]&gt;;"Comment"<[email protected]&gt;;
主题:&nbsp;Re: [ElemeFE/element] [Bug Report] 当有一列是fixed时，table显示错位 (#4976)

方式1：

方式2：
:height="tableHeight"改为:max-height="tableHeight"

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.

[fatpandaria]

没想到这个bug居然这么老了，亲测手动执行this.$refs.table.doLayout()方法有效；

[zhengmiaohua]

而且有时候列神奇的就第一列到最后去了

今天我遇到了这个问题

[anrgct]

我在keep-alive组件activated时调用了一下就好了
activated(){ this.$refs.table.doLayout() }