關(guān)于element table 如果布局在大外層設(shè)置 flex ，左測 sidebar 自由寬度，右邊設(shè)置 flex:1 就沒有這篇文章了，可是事情沒那么簡單...

理想的布局：

圖一

項(xiàng)目實(shí)際布局：左邊是 sidebar 然后用 fixed 布局， 右邊內(nèi)容區(qū)域是 margin-left 撐開寬度

圖二

Element-ui Table 自適應(yīng)

我們知道 elementui table 寬度默認(rèn)是自適應(yīng)的，最多在 <el-table style="width: 100%"></el-table> 寬度設(shè)置為 100% 就會自適應(yīng)且列的寬度會自動適應(yīng)，就像我們平時(shí)使用的 table，這是為什么呢？因?yàn)?table 有一個配置 fit 如下圖

image.png

但是我們看 DOM 結(jié)構(gòu)，table 外部雖然有個內(nèi)聯(lián)樣式 width: 100%; 內(nèi)容還是有設(shè)置實(shí)際寬度的

image.png

我的問題就出在圖二中，fixed 區(qū)域觸發(fā)事件使自身寬度變大，右側(cè) margin-left 值變大，也就是右側(cè)內(nèi)容區(qū)域?qū)挾茸冃r(shí)候，table 寬度不會改變，導(dǎo)致頁面出現(xiàn)了橫向滾動條。

網(wǎng)上搜出來的解決辦法

• Table的父元素加個樣式就可以了 overflow: auto;
• 還有網(wǎng)上各種復(fù)制蔡俊鋒前輩的答案
• 還有其他能試的方法

結(jié)果以上的辦法都沒卵用

既然 fit 能自適應(yīng)，只能看看源碼中 fit 配置了什么

image.png

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

image.png

我們知道監(jiān)聽一個元素大小變化或者屏幕橫豎屏?xí)r，我們需要監(jiān)聽window.resize事件或者window.orientationchange方法。由于 resize 事件會在一秒內(nèi)觸發(fā)將近60次，所以很容易在改變窗口大小時(shí)導(dǎo)致性能問題，所以 window.resize 事件通常是浪費(fèi)的，不過我們有節(jié)流可以有效提高性能。 可是 window.resize 只能監(jiān)聽 window 對象，如果對于一個 div ，我們是無能為力的，還好有 resize-observer-polyfill，包里面有用到 MutationObserver API 有興趣可以看看 可以監(jiān)聽到元素的變動。

所以想要 table 自適應(yīng)，需要父級的寬度有觸發(fā)到變化，addResizeListener 事件自動會觸發(fā)，自適應(yīng)自然就解決了。想到兩個解決方案

一

父元素設(shè)置 position: relative ，table 外層新增一個 div， 設(shè)置 position: absolute; 這樣 table 就會跟隨父元素的寬度變化了。結(jié)構(gòu)大概是

<div style="position: relative;">
    <div style="position: absolute;">  
        <el-table/>
    </div>
</div>

這樣結(jié)果可行，唯一遺憾就是 table 脫離文檔流，文檔流內(nèi)的內(nèi)容會與 table 重疊。這是就得乖乖計(jì)算 table 的高度撐開，麻煩

二

既然這樣我為何不在圖二右內(nèi)容的寬度 在 resize 是設(shè)置寬度，都是 resize ，設(shè)置多一個寬度 不會造成什么浪費(fèi)。這樣就能強(qiáng)制其子元素寬度發(fā)生變化，table 也就理所當(dāng)然的改變寬度了。 所以 table 的問題解決

Echarts 自適應(yīng)

echarts 提供了 resize 的 api，不過需要自己去調(diào)用。方法很簡單。

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()
      })
    },  
}