Element Table & echarts 自适应

关于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 如下图

image.png

但是我们看 DOM 结构，table 外部虽然有个内联样式 width: 100%; 内容还是有设置实际宽度的

image.png

我的问题就出在图二中，fixed 区域触发事件使自身宽度变大，右侧 margin-left 值变大，也就是右侧内容区域宽度变小时候，table 宽度不会改变，导致页面出现了横向滚动条。

网上搜出来的解决办法

Table的父元素加个样式就可以了 overflow: auto;
还有网上各种复制蔡俊锋前辈的答案
还有其他能试的方法

结果以上的办法都没卵用

既然 fit 能自适应，只能看看源码中 fit 配置了什么

image.png

在路径 /element-ui/src/utils/resize-event.js 可以找到 addResizeListener 方法

image.png

我们知道监听一个元素大小变化或者屏幕横竖屏时，我们需要监听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()
      })
    },  
}

Element Table & echarts 自适应