v-deep解決el-table的fixed列在放大情況下導致的樣式問題
阿新 • • 發佈：2021-02-01
技術標籤：前端
問題描述：
el-table中使用fixed屬性，懸浮了一列資料，在放大的情況下發現該列出現了樣式差異，究其原因是設定的overflow屬性未被執行。
錯誤樣式如下，該圖片在瀏覽器放大到110%時出現
問題程式碼
.el-table__fixed-right{
overflow: hidden;
}程式碼雖然沒錯，但檢視樣式時返現只有x軸方向執行了溢位隱藏，y軸並未執行，於是出現了該問題
問題解決：
同事推薦v-deep解決該問題，程式碼如下
::v-deep .el-table__fixed-right{ overflow: hidden; }
心得：
學到了一個新的深度樣式的解決方法，但該方法還是要在元件樣式scoped的方式下使用，防止篡改全域性樣式