PrimeVue DataTable Frozen Column 錯位之謎:兩層 Root Cause,與一個 ResizeObserver Directive 解法
專案裡的 PrimeVue DataTable 用了 frozen column(凍結欄),QA 回報一個詭異的現象:表格內容變多、垂直 scrollbar 出現的那一刻,凍結欄的位置就錯了——欄與欄之間出現縫隙或互相重疊,橫向捲動時整個版面破掉。更麻煩的是它「時好時壞」,看起來像隨機發生。
專案裡的 PrimeVue DataTable 用了 frozen column(凍結欄),QA 回報一個詭異的現象:表格內容變多、垂直 scrollbar 出現的那一刻,凍結欄的位置就錯了——欄與欄之間出現縫隙或互相重疊,橫向捲動時整個版面破掉。更麻煩的是它「時好時壞」,看起來像隨機發生。
有一個共用的 composable,負責去後端撈一份「選項清單」(下拉選單用的 label)。它用 module scope 的 ref 做成 singleton + cache,設計上要外層 component 先呼叫 fetch() 把資料載進來,子 component 再直接讀 cache。
前一篇結尾預告了這次改版唯一一個讓我卡住超過幾小時的 bug。獨立寫一篇,因為它的「形狀」比細節更值得記。
上一篇寫完設計診斷,這篇換工程的角度。
我這個 blog 改版想做很久了。每次打開自己的站,都覺得「不對」,但說不出哪裡不對。看別人的 blog ──Josh Comeau、Robin Rendle、那些做得好的個人站 ──就知道差在哪一個層級的東西,但翻不出名字。
在 Nuxt 3 的 SPA 專案中,Layout 與 Page 之間的高度管理是個容易踩坑的地方。本文記錄一個常見問題:各個 Page 各自用 h-screen 控制高度,導致出現多餘的外層 scrollbar,以及修正過程中學到的 CSS 定位觀念。
最近在做一個多 Tab 頁面的「下載圖表」功能時,踩到一個 Chart.js 的經典坑:當圖表所在的 Tab 被隱藏時,匯出的圖片是空白的。