[Bug Report] the width of table has been increased when scaling when

[zaoyu63]

Element UI version

2.4.0

OS/Browsers version

macOs 10.13.4/ chrome 67.0.3396.62（正式版本）

Vue version

2.5.15

Reproduction Link

https://jsfiddle.net/zaoyu/1jb64fbx/2/

Steps to reproduce

in chrome, el-table parentNode, style="display:table-cell", when narrowing page until the x-scroll bar is appeared, resizeListener event is trigger unceasing, the width of table has been increased unceasing

What is Expected?

the width of table is not increase

What is actually happening?

the width of table has been increased unceasing

[element-bot]

Translation of this issue:

Element UI version
2.4.0

OS/Browsers version
MacOs 10.13.4/ chrome 67.0.3396.62 (official version)

Vue version
2.5.15

Reproduction Link
https://jsfiddle.net/zaoyu/1jb64fbx/2/

Steps to reproduce
In chrome, el-table parentNode, style= "display:table-cell", when narrowing page until the x-scroll.

What is Expected?
The width of table is not increase

What is actually happening?
The width of table has been increased unceasing

[zaoyu63]

To zoom the browser, can appear the situation above

[qiuyeduxin]

In chrome, it will show 'ResizeObserver loop limit exceeded' when the el-table-column does not set width. What should we do when the table need a adaptive width?

[goldengecko]

I have encountered this same resizing issue but for me it only appears to happen in Chrome for Windows (also tested Chrome for Mac, Safari, and Firefox Mac)

[bacy]

I think I have the save problem.when I print an El Table, its width always bigger than the page. this cause the page broken.

[morph85]

I found that the issue was caused by the parent element where "display: flex" is defined, it could be caused by other layout library as well. This could be workaround but turning it off fixed this issue. And for my case it only happen in Firefox.

[stale]

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.

[coderkeel]

提供一个Hack方案

import Vue from 'vue'
import ElementUI,{ Table } from 'element-ui'

// 解决 ElTable 自动宽度高度导致的「ResizeObserver loop limit exceeded」问题
const fixElTableErr = table => {
  const oldResizeListener = table.methods.resizeListener
  table.methods.resizeListener = function () {
    window.requestAnimationFrame(oldResizeListener.bind(this))
  }
}

// 一定要在Vue.use之前执行此函数
fixElTableErr(Table)

Vue.use(ElementUI)

[xxlbb123]

@coderkeel 我使用的是element-plus，这个el-table里面没有resizeListener这个方法怎么解决？

[xjs568349]

@coderkeel 我使用的是element-plus，这个el-table里面没有resizeListener这个方法怎么解决？

我也是，求解

[duduhhd]

ts 哪个文件里面写呢