Element Table & echarts 自适应

关于element table 如果布局在大外层设置 flex ,左测 sidebar 自由宽度,右边设置 flex:1 就没有这篇文章了,可是事情没那么简单...

理想的布局:


图一

项目实际布局:左边是 sidebar 然后用 fixed 布局, 右边内容区域是 margin-left 撑开宽度


图二

Element-ui Table 自适应

我们知道 elementui 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 就会跟随父元素的宽度变化了。结构大概是

这样结果可行,唯一遗憾就是 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 自适应)