VUE 表格元件進階-分頁
上一篇《VUE 表格元件進階-排序》有提到把表格做成公用的子元件，子元件本身有排序的功能，在這一篇我要加上分頁的功能，把分頁元件當成表格元件的子元件，如此一個表格元件的功能才算完整。
Tag VUE
VUE 表格元件進階-排序
身為一個前端工程師常常會遇到處理表格的問題，SA 開出來的需求大概就是排序、一頁顯示幾筆資料及分頁等功能。這裡我先筆記一下，如何達成排序的功能。
神機妙算-再談computed
computed 是 VUE 提供的計算方法，會觀察自己函式內響應式資料的變化，並返回一個值。就像一個臨時快照一般，當自己函式內的響應式資料發生變化，computed 就來拍一張快照，並把這張快照放在暫存裡面，所以 computed 是響應資料變化的結果，不能由結果回過頭去改變資料。
app.config.globalProperties 全局 filter 使用方法
在幫舊專案由 Vue2 升版到 Vue3 的過程中，我有看到這樣的寫法：{{ ref 變數 | $filters.comma.format }}，查了資料之後，知道這是 Vue2 filter 的寫法，但是這樣的寫法 {{ ref 變數 | $filters.comma.format }} 在 Vue3 並不起作用喔，Vue3 的要做相同的事情要做另外的處理。
把 Chart.js 的創建方法寫成 Composable
最近有點迷上 VUE3 的 composble 寫法，把可以重複利用的程式邏輯抽來變成composbal，要用的時候再匯入使用。今天我試著把 Chart.js 的創建方法抽出來放在 composables 中，沒想到竟然可行，以下整理一下我的作法。
隔山打牛的傳透 Attributes
VUE 官網把 Fallthrough Attributes 翻為 「透传 Attributes」，聽起來有點莫測高深，說穿了其實滿好懂的。簡單來講，如果在父層置入子元件，同時在父層的子元件上加上 class 樣式，則這個 class 樣式會傳入子元件與子元件內 DOM 的原本 class 樣式結合。
input 欄位輸入數字時自動插入千分位逗點
最近在改一個舊專案的 input 欄位的千分位問題，它一般可以正常運作，也就是輸入到超過千位時，每三位數自動加上千分位點。但是有時候壞掉，就會變成出現千分位點之後，輸入的數字會重複，我檢查之後發現是一次輸入會觸發兩次 input 事件。所以我就去研究了 input 欄位判斷千分位點的作法。
Vue3-在 input 輸入框按 enter 觸發form刷新解法
之前幫一個舊專案升版到 Vue3，整個就專案都是用 Bootstrap Vue 寫的，每個 input 都被包在 Bootstrap Vue 封裝好的元件裏面，為了把這些封裝好的 input 拆出來，我花了很多功夫。其中遇到的一個難題是 input 輸入框按 enter 會觸發表單重整，全部輸入框都被清空了，還會觸發 click 事件，執行不該執行的函式，而這不是我想要的結果。
axios create() + Vue-loading-overlay 實戰應用
之前寫了 axios 的基本用法與搭配 axios create() 的使用方法，在這裡我想利用 pinia 共用 loading 的狀態，利用 .interceptors.request.use() 與 .interceptors.response.use()，開關 vue-loading-overlay 的效果。
如何在 Vue3 將 Chart.js 圖表下載成圖片
將網頁圖表輸出成圖檔也是常常被 PM 大人要求的功能，這周就來記錄一下如何在 Vue3 框架中，將 Chart.js 圖表輸出成 PNG 圖片。