关于element table 如果布局在大外层设置 flex ，左测 sidebar 自由宽度，右边设置 flex:1 就没有这篇文章了，可是事情没那么简单...
理想的布局：
项目实际布局：左边是 sidebar 然后用 fixed 布局， 右边内容区域是 margin-left 撑开宽度
Element-ui Table 自适应
我们知道 elementui table 宽度默认是自适应的，最多在 <el-table style="width: 100%"></el-table> 宽度设置为 100% 就会自适应且列的宽度会自动适应，就像我们平时使用的 table，这是为什么呢？因为 table 有一个配置 fit 如下图
但是我们看 DOM 结构，table 外部虽然有个内联样式 width: 100%; 内容还是有设置实际宽度的
我的问题就出在图二中，fixed 区域触发事件使自身宽度变大，右侧 margin-left 值变大，也就是右侧内容区域宽度变小时候，table 宽度不会改变，导致页面出现了横向滚动条。
网上搜出来的解决办法
- Table的父元素加个样式就可以了 overflow: auto;
- 还有网上各种复制蔡俊锋前辈的答案
- 还有其他能试的方法
结果以上的办法都没卵用
既然 fit 能自适应，只能看看源码中 fit 配置了什么
在路径 /element-ui/src/utils/resize-event.js 可以找到 addResizeListener 方法
我们知道监听一个元素大小变化或者屏幕横竖屏时，我们需要监听window.resize事件或者window.orientationchange方法。由于 resize 事件会在一秒内触发将近60次，所以很容易在改变窗口大小时导致性能问题，所以 window.resize 事件通常是浪费的，不过我们有节流可以有效提高性能。 可是 window.resize 只能监听 window 对象，如果对于一个 div ，我们是无能为力的，还好有 resize-observer-polyfill，包里面有用到 MutationObserver API 有兴趣可以看看 可以监听到元素的变动。
所以想要 table 自适应，需要父级的宽度有触发到变化，addResizeListener 事件自动会触发，自适应自然就解决了。想到两个解决方案
一
父元素设置 position: relative ，table 外层新增一个 div， 设置 position: absolute; 这样 table 就会跟随父元素的宽度变化了。结构大概是
<div style="position: relative;">
<div style="position: absolute;">
<el-table/>
</div>
</div>
这样结果可行，唯一遗憾就是 table 脱离文档流，文档流内的内容会与 table 重叠。这是就得乖乖计算 table 的高度撑开，麻烦
二
既然这样我为何不在图二右内容的宽度 在 resize 是设置宽度，都是 resize ，设置多一个宽度 不会造成什么浪费。这样就能强制其子元素宽度发生变化，table 也就理所当然的改变宽度了。 所以 table 的问题解决
Echarts 自适应
echarts 提供了 resize 的 api，不过需要自己去调用。方法很简单。
data: () {
return {
chart: null //初始化之后赋值为图表
}
},
mounted() {
addListener(document.getElementById('analyze'), this.chartResize)
},
beforeDestroy() {
removeListener(document.getElementById('analyze'), this.chartResize)
},
methods: {
chartResize() {
setTimeout(() => {
this.chart && this.chart.resize()
})
},
}
