[笔记] 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实现表格表头纵向显示


按赞加入粉丝团

延伸阅读