MUKI space*
Front-end Development,
Effective Note-Taking.
使用 Element Plus 分頁處理前端的大量資料，並使用工廠函式優化程式碼
通常在網站上顯示大量資料，前端會從後端 API 獲取分頁資料，但若後端未提供分頁功能，可使用 Vue3 與 Element Plus 實現前端分頁。Element Plus 的 el-table 和 el-pagination 元件需自行處理。
利用工廠函式 (Factory Function) 可優化重複的分頁功能。工廠函式可接收參數並返回需要的資料，減少重複程式碼。透過工廠函式建立分頁狀態、處理資料過濾及跳頁功能，達到重用與減少冗餘程式碼的目的。...
整合 TailwindCSS 與 Element Plus 的 CSS class 變數
TailwindCSS 和 Element Plus 各有獨立的顏色主題，若要結合兩者的 CSS 變數，可利用 TailwindCSS 的擴充設定。首先，在 tailwind.config.js 中，透過迴圈將 Element Plus 的變數加入 TailwindCSS。這樣一來，便可在 HTML 中使用 TailwindCSS 的 class，直接應用 Element Plus 的 CSS 變數。
例如，使用 var(--el-color-primary-light-5) 作為文字顏色，可寫成 text-el-primary-light-5。若需使用更多 Element Plus 的 CSS 變數，可在 tailwind.config.js 中新增相應函式，將所有變數整合至 TailwindCSS。這樣便能在開發過程中方便地使用這些樣式。...
使用 SCSS each 與 CSS var 變數，調整 Bootstrap, Element UI 的 CSS 樣式
Element UI 雖然能自定義主題，但只能調整整體顏色，難以針對特定 class 修改。使用 SCSS each 與 CSS var 變數，可以精確調整樣式而不影響其他部分。
例如，Element UI 的按鈕有 plain 屬性，透過 SCSS 迴圈與 CSS 變數，可以輕鬆修改按鈕的框線顏色，避免重複編寫 CSS，達到更高效的樣式管理。...