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

一个项目中用到了element-ui里面的table,其中一列设置了min-width属性,导致表格一直抖动而且宽度持续增加
通过控制台发现组件生成的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事件了。
现在的解决办法是这样的:
1\在最外层的div上加入了width:100%,暂时解决了这个问题

.base_pro #wfmpage > div {
    
    
    width: 100%;
}

参考链接:https://blog.csdn.net/qq_31967569/article/details/120127206

猜你喜欢

转载自blog.csdn.net/u013994400/article/details/129275426