異常點:
- 界面顯示不完整,
- 表格卡頓,界面已經(jīng)刷新完成,但是表格的寬度還在一點一點變化,甚至有無線延伸的情況
思路:
?1. 使用doLayout
這里官方文檔有說明,
所以我的想法是,監(jiān)聽瀏覽器的resize事件,然后執(zhí)行doLayout 方法。
結(jié)果是:
偶爾可以解決,偶爾又出現(xiàn)了,,,四舍五入等于沒解決
?2. 調(diào)整css 樣式
是的,沒錯,調(diào)整css樣式就可以。
重點就是在我們?nèi)绾螌崿F(xiàn)以上這種樣式。
我最開始的方案是aside 定寬,main則使用flex:1 的方式。(這種方式就會出現(xiàn)上面所說的異常點)
所以我試著進(jìn)行了調(diào)整:
在父級添加 width: 100% 時,aside 定寬不變,但是對于main 則改用calc: (100% - 定寬)。文章來源:http://www.zghlxwxcb.cn/news/detail-682073.html
效果驚人的好,此時無論如何調(diào)整瀏覽器分辨率,el-table 都可以正常顯示,且沒有出現(xiàn)卡頓的情況。文章來源地址http://www.zghlxwxcb.cn/news/detail-682073.html
.box{
width: 100%;
.aside{
width: 240px;
}
.main{
width: calc(100% - 240px);
margin: 0 10px;
}
}
到了這里,關(guān)于elementui table 在瀏覽器分辨率變化的時候界面異常的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!