關(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% 就會(huì)自適應(yīng)且列的寬度會(huì)自動(dòng)適應(yīng)今缚，就像我們平時(shí)使用的 table算柳，這是為什么呢？因?yàn)?table 有一個(gè)配置 fit 如下圖
但是我們看 DOM 結(jié)構(gòu)姓言，table 外部雖然有個(gè)內(nèi)聯(lián)樣式 width: 100%; 內(nèi)容還是有設(shè)置實(shí)際寬度的
我的問題就出在圖二中瞬项，fixed 區(qū)域觸發(fā)事件使自身寬度變大，右側(cè) margin-left 值變大何荚，也就是右側(cè)內(nèi)容區(qū)域?qū)挾茸冃r(shí)候囱淋，table 寬度不會(huì)改變，導(dǎo)致頁面出現(xiàn)了橫向滾動(dòng)條餐塘。
網(wǎng)上搜出來的解決辦法
- Table的父元素加個(gè)樣式就可以了 overflow: auto;
- 還有網(wǎng)上各種復(fù)制蔡俊鋒前輩的答案
- 還有其他能試的方法
結(jié)果以上的辦法都沒卵用
既然 fit 能自適應(yīng)妥衣，只能看看源碼中 fit 配置了什么
在路徑 /element-ui/src/utils/resize-event.js 可以找到 addResizeListener 方法
我們知道監(jiān)聽一個(gè)元素大小變化或者屏幕橫豎屏?xí)r，我們需要監(jiān)聽window.resize事件或者window.orientationchange方法。由于 resize 事件會(huì)在一秒內(nèi)觸發(fā)將近60次税手，所以很容易在改變窗口大小時(shí)導(dǎo)致性能問題蜂筹，所以 window.resize 事件通常是浪費(fèi)的，不過我們有節(jié)流可以有效提高性能芦倒。 可是 window.resize 只能監(jiān)聽 window 對(duì)象艺挪，如果對(duì)于一個(gè) div ，我們是無能為力的熙暴，還好有 resize-observer-polyfill闺属，包里面有用到 MutationObserver API 有興趣可以看看 可以監(jiān)聽到元素的變動(dòng)。
所以想要 table 自適應(yīng)周霉，需要父級(jí)的寬度有觸發(fā)到變化掂器，addResizeListener 事件自動(dòng)會(huì)觸發(fā)，自適應(yīng)自然就解決了俱箱。想到兩個(gè)解決方案
一
父元素設(shè)置 position: relative 国瓮，table 外層新增一個(gè) div， 設(shè)置 position: absolute; 這樣 table 就會(huì)跟隨父元素的寬度變化了狞谱。結(jié)構(gòu)大概是
<div style="position: relative;">
<div style="position: absolute;">
<el-table/>
</div>
</div>
這樣結(jié)果可行乃摹，唯一遺憾就是 table 脫離文檔流，文檔流內(nèi)的內(nèi)容會(huì)與 table 重疊跟衅。這是就得乖乖計(jì)算 table 的高度撐開孵睬，麻煩
二
既然這樣我為何不在圖二右內(nèi)容的寬度 在 resize 是設(shè)置寬度，都是 resize 伶跷，設(shè)置多一個(gè)寬度 不會(huì)造成什么浪費(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()
})
},
}
