ElementUI el-table 在flex下的宽度自适应问题

BUG：在flex容器下面的一个flex:1的子容器里面写了个el-table用来展示列表数据，在做宽度自适应测试的时候发现该组件的宽度只会增加不会缩小。

Debug：通过控制台发现组件生成的table的宽度是动态计算的，翻查源码，发现以下代码段

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

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

解决方案：可以将设置了flex属性的容器设置position:relative，然后在子元素加多一层div包裹内容，设置position:absolute; width:100%;继承父级宽度，那么内容也会继承该div的宽度了。

转载于:https://www.cnblogs.com/qingcui277/p/9881673.html

第二种方案差不多：
设置el-table为position:absolute。

但是有遇到了另一个问题，absolute没法撑开div高度，导致table看不到。
解决办法：

mounted () {
    this.wrapDom = document.getElementById('tableWrap')
    let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
    let element = document.querySelector('#tableID')
    this.observer = new MutationObserver((objList) => {
      console.log('obj List:', objList)
      let width = element.offsetWidth
      if (this.recordOldValue && width === this.recordOldValue.width) {
        return
      }
      this.recordOldValue = {
        width
      }
      console.log('obj width:', width)
      this.wrapDom.style.height = element.offsetHeight + 58 + 'px'
    })
    this.observer.observe(element, { attributes: true, childList: true, subtree: true })
  },
  beforeDestroy () {
    // 停止观测
    this.observer.disconnect()
    this.observer = null
  }