最近在開發一個項目,使用到了element中的表格組件,但是該組件的樣式不是我們想要的樣式,需要自己再調整,但是常常會遇到自己設置的樣式無效,我使用的技術是Vue開發的
1. 頁面使用了三欄布局,最右邊的表格需要自適應,左邊兩欄都是固定寬度,因此我使用了 flex 布局, el-table 外層使用了一個 div ,樣式都加載這個 div 中,這時遇到一個問題,那就表格無法自適應,因為表格我加了 stripe,border 屬性,這些都是element自帶的樣式,會和 flex 布局有關系,這是我又加了 fit 列的寬度是否自撐開設個為 false ,這時沒有問題,但是我目標效果就是自動撐開,顯然不能這么處理,然后我嘗試着把外層 div 去掉,把樣式加在 el-table ,這個時候就可以達到我想要的效果。分析原因,element的表格是自動撐開時樣式要加在表格身上。
2. 表格加了斑馬線的屬性,但是有些行我不要加斑馬線,默認情況下斑馬線樣式優先顯示,樣式中可以使用 !important ,但是鼠標滑動效果又沒有了,這個問題一直困惱着我好久,還沒有好的解決辦法
3. 表格居中問題,默認表格是中間對齊,如果內容要左對齊,就要自己把內容設置個寬度,要不然內容長度不同是無法對齊的。