element UI中flex布局下el-table宽度自适应在IE下出现一直加载宽度的bug解决

最近的一个后台项目大量用到了element-ui里面的table。在调试ie兼容性的时候发现当没有加载表格数据只有表头时显示正常，但当加载数据后，表格一直抖动而且宽度持续增加。默认fit=true，把fit设置为false后是不会抖动了，但列不能充满表格。
Debug：通过控制台发现组件生成的table的宽度是动态计算的，翻查源码，发现以下代码段

// table.vue
if (this.fit) {
  addResizeListener(this.$el, this.resizeListener);
}

// resize-event.js
export const addResizeListener = function(element, fn) {
  if (isServer) return;
  if (!element.__resizeListeners__) {
    element.__resizeListeners__ = [];
    element.__ro__ = new ResizeObserver(resizeHandler);
    element.__ro__.observe(element);
  }
  element.__resizeListeners__.push(fn);
};

也就是说，组件的resize事件是绑定在this.$el上了，这应该就是的原因所在了。

flex容器下的width:100%会一直向上继承，直到flex容器下第一级子元素，但是当某个子元素的宽度出现固定值并且大于flex伸展的宽度的时候，那么容器就不会收缩，自然也就触发不了resize事件了。

这里我给大家一个我目前的解决方案
在flex:1 的元素中加入css

position:relactive

然后在table外面在加上一层div 设置其css,继承父级宽度

div{
	position:absolute,
	width:100%;
}

这样问题就解决了,希望这能给你们带来帮助