[筆記] Element UI Table 表格表頭縱向顯示

章節連結

這回在從事公司專案時,遇上了一個稍嫌難解的問題。在 Element UI Table 表格選項內,它預設是抓取每一個物件的 Key 值名稱,然後對應的資料是由上往下顯示的。不過若你想要客製化的將每一個物件自己的 key-value 值由上到下長出,在資料格式上就會很難處理,而且也不直覺。其實你也可以自己模仿 Element UI 表格的版型來手刻一個表格。
vue.js logo vue


Element UI 官網預設

notes-element-ui-table-horizontal-header-and-data

你會發現欄位是抓取每一個 {} 裡的同 key 項目,然後直欄顯示。

縱向表頭顯示

官網上是沒有這樣的範例的,不過現實中是會有這樣的需求的。例如說你想要比較 3 家店面的來客數、成交單數、總收入……等,你可能會取得以下的資料:

Id 1 2 3
Transactions 28983 283 2883
Revenue 238500 28500 28500
Total Customer 10000 100 1000

此時, Element UI Table 就沒有這樣的範例可以作為參考了。況且若為了能適用 Element UI 的表格架構,而要重新建構所取得的陣列物件資料,也不是很直覺能讓你日後較好維護。既然如此,那麼就來手刻一個。

手刻表格規劃重點

1. 每一個直欄都是一個小表格<table>,作為表頭的第一直欄給個自訂 class=”firstTable”,其餘的就是 “secondTable”,這樣日後比較好維護。
2. 最外框 div 的 multiple-tables 採用 display:flex 布局,這樣內層的每個被 div 包覆的直欄,就會乖乖的由左至右縮放排列,且支援 RWD,可以在兩個 class 上分別設置寬度比例。
3. 框線部分可以利用線上生成器模擬一下,再將其設置到 CSS 上。
4. 若你的欄位 <td></td> 內有需要分割顯示的,可以考慮在這個欄位再生成一個小的 display:flex 格局,裡頭的兩個 <div> 各佔 欄位50%的空間。
5. 框線要可以隱藏,只要讓它變得跟背景一樣顏色,就可以了。
6. 點擊事件,就在欄位上綁上監聽器,做操作即可。
7. 如果你是要點擊後,對應某些表格格內顏色會變化的話,那這個你就得寫一段 .js 去改變你想要的 DOM 位置的 CSS 了。這可以細分成兩個部分:點擊到指定的欄位位置的顏色變化、點擊全部表格以外地區的顏色變化,考驗你的 querySelectorAll 和好好的定義 class 位置。

 


參考資料

1. vue、element实现表格表头纵向显示

按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:18