Element: [Bug Report] table出现水平滚动条 滚不动且错位

[treasureDouDou]

Element UI version

2.0.2

OS/Browsers version

win10

Vue version

2.5.2

Reproduction Link

Steps to reproduce

el-table-column 加上 fixed="left"属性，X轴缩小浏览器窗口，出现X轴滚动条，但是滚不动，且与固定列错位。
如不加上fixed="left"，X轴缩小浏览器窗口，出现X轴滚动条，但也滚不动

What is Expected?

不要滚不动的滚动条不要错位

What is actually happening?

错位，滚动条滚不动

[element-bot]

Translation of this issue:

Element UI version

2.0.2

OS/Browsers version

Win10

Vue version

2.5.2

Reproduction Link

Steps to reproduce

El-table-column plus the fixed= "left" attribute, the X axis shrinks the browser window, and the X scroll bar appears, but it rolls and does not work with the fixed column.
If you don't add fixed= "left" X axis X axis to narrow the browser window, scroll bar, but also do not

What is Expected?

Don't roll, don't go wrong

What is actually happening?

Dislocation, rolling bar not moving

qq 20171101195754

[pz25925]

2.0.3 版本
同样出现这个问题

[momodexuyuan]

2.0.5 同样问题

[treasureDouDou]

@momodexuyuan @pz25925 已解决，单独拖table组件放在src里面，改源码，改了就正常了

[treasureDouDou]

[treasureDouDou]

拖出来的table,里面src路径换成lib已经编译的问题，不然打包报编译错误

[pz25925]

@treasureDouDou

我是修改了默认样式修复的. 但是不知道原理...

[treasureDouDou]

@pz25925 我是动态加入数据导致的。官网组件，动态加入数据并不会再次初始化。当缩放窗口就会初始化布局。动态加入数据加上css布局，这就导致了bug,滚动条错位。我的数据如下图

[momodexuyuan]

@treasureDouDou 我的也是动态添加数据。根据你的思路，我用另外的方法解决了。2.0.5更新支持了表格doLayout()。在动态添加数据后，执行一次doLayout就好了。

this.data.push({
  id: 1,
  name: 'joker'
})

this.$nextTick(() => {
      this.$refs.testTable.doLayout()
})

[treasureDouDou]

@momodexuyuan 版本更新太快了,没多少天，没注意这些，我是2.02的版本

[weifeiyue]

@treasureDouDou @momodexuyuan 你们如何解决这个问题？

[momodexuyuan]

@weifeiyue 监听窗口大小变化，然后重新渲染表格

[treasureDouDou]

@weifeiyue 方法1，监听窗口，重新布局。方法二，改源码。我用的第二个，因为很多地方会用这玩意

[weifeiyue]

@momodexuyuan @treasureDouDou 谢谢，怎么官方不解决:joy:

[weifeiyue]

@Leopoldthecoder 麻烦验证一下这个是否为bug？

[coyi-zdy]

@pz25925 你弄懂这个overLay的属性的作用了吗？我的理解是它忽略了scroll的高宽，我这边的业务场景用你说的这个解决了问题，尽量没去重写组件。。。也只是在chrome上用。所以满足，赞一个。

[acfasj]

@weifeiyue +1

[shyser]

+1

[mmfjx]

+1