這回在從事公司專案時，遇上了一個稍嫌難解的問題。在 Element UI Table 表格選項內，它預設是抓取每一個物件的 Key 值名稱，然後對應的資料是由上往下顯示的。不過若你想要客製化的將每一個物件自己的 key-value 值由上到下長出，在資料格式上就會很難處理，而且也不直覺。其實你也可以自己模仿 Element UI 表格的版型來手刻一個表格。
Element UI 官網預設
你會發現欄位是抓取每一個 {} 裡的同 key 項目，然後直欄顯示。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } } </script> |
縱向表頭顯示
官網上是沒有這樣的範例的，不過現實中是會有這樣的需求的。例如說你想要比較 3 家店面的來客數、成交單數、總收入……等，你可能會取得以下的資料：
|
1 2 3 4 5 |
const data = [ {'id': 1, 'revenue': 238500, 'totalCustomer': 10000, 'transactions':28983}, {'id': 2, 'revenue': 28500, 'totalCustomer': 100, 'transactions':283}, {'id': 3, 'revenue': 28500, 'totalCustomer': 1000, 'transactions':2883}, ] |
| 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<el-row type="flex" style="overflow:auto;"> <div class="multiple-tables"> <div class="firstTable"> <table width="100%" rules="all" cellpadding="5"> <tr> <td> <span>ID</span> </td> </tr> <tr> <td> <span>Transactions</span> </td> </tr> <tr> <td> <span>Revenue</span> </td> </tr> </table> </div> <div class="secondPartTable" v-for="(item, index) in tableData" :key="index" > <table width="100%" rules="all" cellpadding="5"> <tr> <td> <span>{{item.id}}</span> </td> </tr> <tr> <td> <div class="td_content"> <div>{{item.transactions}}</div> </div> </td> </tr> <tr> <td> <div class="td_content"> <div>{{item.revenue}}</div> </div> </td> </tr> </table> </div> </div> </el-row> |
