element-plus中的el-table元件tooltip顯示錯位

Ebbjik發表於2024-09-04
元件

  • 問題描述：
    element-plus元件庫中的el-table元件有一個show-overflow-tooltip屬性，設定為true時如果表格中資料過長就會顯示一個浮動視窗就像這樣
    而有時這個小浮窗會有錯位的問題
    像是這樣，會導致靠上的列浮窗直接越界不顯示

  • 問題原因
    table 下的 tooltip 是 fixed 定位。
    position: fixed
    元素會被移出正常文件流，並不為元素預留空間，而是透過指定元素相對於螢幕視口（viewport）的位置來指定元素位置。元素的位置在螢幕滾動時不會改變。列印時，元素會出現在的每頁的固定位置。fixed 屬性會建立新的層疊上下文。當元素祖先的 transform、perspective、filter 或 backdrop-filter 屬性非 none 時，容器由視口改為該祖先。

  • 解決方法

點選檢視程式碼 
// 防止表格 tooltip 偏移
.el-table {
  transform: scale(1);
}
也不一定要這個樣式，重要的是不能讓tranform為空

當元素祖先的 transform、perspective、filter 或 backdrop-filter 屬性非 none 時，容器由視口改為該祖先。
給父元素加上 transform: scale(1) 或者是別的,只要transform 的屬性不是none就行

原部落格連結

相關文章