Element: [Bug Report] table content width display wrong in ie11

[xyhxyw]

Element UI version

2.2.0

OS/Browsers version

IE11

Vue version

2.5.13

Reproduction Link

https://jsfiddle.net/xyhxyw/kp3ffLtw/

Steps to reproduce

1 open the jsfinddle in ie11,nothing is showed,table can't render right. (it's just a copy of step2)
2 or open 'http://element-cn.eleme.io/2.2/#/zh-CN/component/table' in IE11，you'll found that talble content width is not right.

What is Expected?

table content width render right（table内容应该是100%宽度）

What is actually happening?

table content width render wrong（table内容宽度计算错误，在IE11中直接打开step2中的官网页面即可发现问题）

[element-bot]

Translation of this issue:

Element UI version

2.2.0

OS/Browsers version

IE11

Vue version

2.5.13

Reproduction Link

https://jsfiddle.net/xyhxyw/kp3ffLtw/

Steps to reproduce

1 open the jsfinddle in ie11, nothing is showed, table can't render right..

2 or open'http://element-cn.eleme.io/2.2/#/zh-CN/component/table'in IE11, you'll found that talble content width is

What is Expected?

Table content width render right (table content should be 100% width)

What is actually happening?

Table content width render wrong (computational error, table content in width IE 11 directly open the Step2 web page can be found in the problem)

[fairyier]

element-ui 1.4.x 的时候，tabel 中不设置宽度的默认会占用表格的剩余宽度，但在新版本2.2.1在IE中不会自动占用表格剩余宽度，如官网例子：http://element-cn.eleme.io/2.2/#/zh-CN/component/table 在IE浏览器，未给宽度的“地址”列，很窄，使表格后面留空了

[xyhxyw]

@Leopoldthecoder ，is there a plan to fix the bug?

[emorlasar]

table.vue 里的this.doLayout()放$nextTick里执行就可以

mounted() {
  //this.doLayout();
  this.$nextTick(() => {
      this.doLayout();
  });
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[xcchcaptain]

这个问题一直未修复啊

[Eviwang]

table.vue 里的this.doLayout()放$nextTick里执行就可以

mounted() {
  //this.doLayout();
  this.$nextTick(() => {
      this.doLayout();
  });
}

bug 原因

IE 11浏览器满足下面两个条件时获取clientWidth为0.

1. 元素设置 overflow: hidden
2. 元素内没有文字内容

在 Chrome,Firfox 能获取到值。

解决方案

方案一、 子元素table内容渲染完毕后，再次做doLayout计算。element 社区解决方案 https://github.com/ElemeFE/element/issues/9916#issuecomment-384927440
此方案在渲染完毕后，再次doLayout会导致dom重绘，用户会有闪烁

方案二、 在table-layout.js中使用getBoundingClientRect().with 设置表格宽度
此方案第一时间获取到元素宽度，使用没有闪烁

updateColumnsWidth() {
    if (Vue.prototype.$isServer) return;
    const fit = this.fit;
    const bodyWidth = this.table.$el.clientWidth || this.table.$el.getBoundingClientRect().width;
    let bodyMinWidth = 0;
    //。。。
}