情境說明
開發公司 Vue 專案，團隊選擇 Vuetify 套件做為搭配使用工具。
有關 Vuetify 的基本介紹，可以參考以下文章：
🚪 探索 Vuetify 介面框架(上)
🚪 探索 Vuetify 介面框架(下)
Vuetify 有提供基本的 Data Table，基本的表格樣式如下：
在開發 Data Table 時，客戶提出進階需求：分層表格 (示意圖如下)
這樣分層的 header，Vuetify 沒有提供直接代參數修改的設定。考量到若使用別的插件，整個系統操作上會覺得一致性不足。細看官方文件，Vuetify 有提供 header slot ，給開發者客製成自己想要的樣式。
-> 故決定延用 Vuetify 的 v-datatable，再做修改。
製作雙層表頭
確認完需求，查詢官方文件時，發現了這個範例。(原始碼由 SunHao 所撰寫) https://codepen.io/sunhao1256/pen/MWeZyMe
依此範例，不難刻出想要的分層表格。在實作中，有一些部分可以注意一下！
(1)<template #header=”{ }”> 可以參考官方文件，這邊重新刻出想要的 header，故在上方需進行 hide-default-header 將原本的 header 隱藏
(2) getSubHeader 精準取到第二層(children)標題
(3) :rowspan 依有無 children 決定單層或是雙層 row
(4) :colspan 依有無 children 決定幾個合併，或是單一個
客製化表格之後，再經適當地調整 CSS ，即可打造彷彿 Vuetify 原生地分層表格📃
手刻排序功能(含方向箭頭)
先別著舉杯慶祝，因著蓋掉原生的 header，會發現原本簡易設定即可完成的 sorting 功能直接消失！
🏁 折衷辦法：自己手刻 sorting 功能(以非 children 部分為例)
單純的 sorting 功能如下：
當點選表頭(使用 watch 去監視)，會修改 sortDirect 升冪與降冪的方向。然而操作上，使用者很快會察覺異樣，因為熟悉的上下箭頭消失了！
為了提升使用者體驗，上下箭頭添加步驟如下：
step1 mouseover 綁定 upHere() 功能
在對應的 <th> 上綁定 @mouseover="upHere(h,'hover', lastTimeClicked, newClicked)" 。lastTimeClicked 是為了記錄使用者是否點過。
step2 mouseleave 綁定 upHere() 功能
mouseleave 和 mouseover 原理相似，newClicked則是為了保留已經點下去的(黑色箭頭)，leave 時不要消失。
上述兩個步驟共用的 upHere() 程式碼如下：
step3 綁定 clickToSort() 功能
在對應的 <th> 上綁定 @click="clickToSort(h,'normal', lastTimeClicked)" 。這邊要注意 lastTimeClicked 是為了記錄使用者是否點過。 'normal' 為了區分是不是分層區塊。以下圖為例：
當點選到 Closed By 區塊(而非底下的三個標題)，不該有任何反應。
clickToSort() 程式碼參考如下：
此部分只有附上關鍵程式碼，細節須依資料型態與實際情形作調整。
完成畫面如下：
分層表格與排序功能兼具了 🙌
小結
由於公司專案架構龐大，呼叫 API 回傳資料複雜，且此篇內容程式碼屬公司智慧資產。綜合以上因素考量，故未附上完整檔案的程式碼。有關 children部分排序方法，參考上述的內容舉一反三即可完成。
整個開發過程，發現自己的需求無法被 Vuetify 現有的功能滿足，便基於其之上，延伸做修改。或許對於客戶只是一個功能的完成，但背後的成長更是鼓勵了自己。
🗿 Standing upon the shoulders of giants.
