序言
在使用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框架常用組件出現異常顯示,考慮樣式污染。
