Element UI Table組件固定列及滾動條樣式異常


序言  

在使用Elemet UI時,常用的el-table組件的固定列顯示不正常:

a.固定列最后一行顯示不正常,最后一行橫向只顯示一部分。

b.用橫向滾動條滾動表格時,固定列跟着一起滾動。

解決方法

a.解決問題a時百度挺管用,很多人都遇到這個問題,於是按照別人的答案,修改固定列的高度。

.el-table__fixed{

  height:100% !important;

}

.el-table__fixed-right{

  height:100% !important;

}

加上之后就解決了,固定列最后一行顯示不完整的問題;

b. 解決b問題時,百度后發現居然沒有人遇到我這種問題;

  1.將自己定義的所有樣式全都去除,只留固定列的設置,仍然顯示不正常。

  2.瀏覽器調試模式觀察生成的html代碼中樣式和官網對比,仍然找不到問題所在(但是應該是有差別的,我當時沒有找到)

  3.請教了好幾位同事,在和其中一位同事重現我的問題時,用他的頁面中的el-table組件進行重現。

第一次打開用他的頁面,滾動條能正常顯示並且滾動。接下來看我的頁面卻不行,奇怪的是,切回去看他的頁面顯示也不正常了。

於是他猜想是樣式污染導致的。果不其然,全局搜索發現,在其他的vue組件中有如下樣式。

  .el-table--scrollable-x .el-table__body-wraper{

    overflow:visible;

  }

   .el-table__body-wraper{

    overflow:visible;

  }

這個樣式正式固定列的樣式,並且這個樣式沒有寫在任何class的內部,直接污染了整個項目的所有用到固定列的el-table組件。

最后刪掉這些樣式問題解決。

總結:

1. 感謝同事的幫助

2. 使用UI框架時樣式代碼用<style scoped>,或者給元素自定義class然后再在自定義的class中去改。

3. UI框架常用組件出現異常顯示,考慮樣式污染。

 


免責聲明!

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



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