element-ui table組件使用v-if時的問題


element-ui項目中經常遇到需要使用v-if指令來根據情況動態顯示隱藏某些列情況,這時就會出現滾動條樣式異常、列錯亂、列寬錯亂等問題

 

解決辦法:在el-table上添加:key="Math.random()"但這會在某些操作下每次重新渲染table,例如獲取選擇行、一些操作交互等情況,因為Math.random()隨機數一直在變化,而且對於selection選擇性表格在獲取到選擇行時會出現所選擇的標記(選擇的那個勾)消失的問題,但其實數據是獲取到的,這也是因為Math.random變化的問題

 

給el-table-column每一列添加:key="Math.random()"也會出現列每次重新渲染閃爍的問題

 

終極解決:給每一列el-table-column添加key值為固定值,例如列的prop屬性值,這樣避免了v-if切換時列錯亂和列寬錯亂問題,但還是會出現表格滾動條上移的問題,偏離原始位置

解決辦法:在設置顯示隱藏的辦法后面添加

this.$nextTick(() => {this.$refs.multipleTable.doLayout();})

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM