最近項目中頻繁使用 table 功能，因為 UI 框架使用的又是 Element UI，于是總結下在 Element 下?el-table?組件使用技巧。

1.行背景色

table 組件提供了?row-style?屬性，說明：行的?style?的回調方法，也可以使用一個固定的?Object?為所有行設置一樣的?Style。

于是我們可以在?method?中寫一個?setRowStyle?方法，通過行索引和背景色數組去匹配顏色值用于單元格背景色。

setRowStyle({row,?rowIndex})?{return?{'background-color':?this.rowsBgColor[rowIndex]}}

而觸發設置我們可以在最后一欄添加名稱為“操作”的下拉菜單按鈕，在菜單里增加行背景色菜單，鼠標移上去，在左側出現的?el-popover?組件中引入?color-picker?組件用于顏色選擇。

2.合并單元格

Table 組件下面有?span-method?屬性，說明：合并行或列的計算方法，傳入的參數有?row,?column,?rowIndex,?columnIndex。

:span-method="objectSpanMethod"

然后我們實現?objectSpanMethod?方法，注意這里的?afterSpanArray?為一個包含第一列和第二列 Prop 值的為屬性值的對象，然后這兩個屬性所對應的 value 值分別為合并行值的數組。

objectSpanMethod?({?row,?column,?rowIndex,?columnIndex?})?{if?(columnIndex?===?0?||?columnIndex?===?1)?{const?_rowspan =?this.afterSpanArray[column.property][rowIndex]const?_colspan =?_rowspan >?0???1?:?0return?{rowspan:?_rowspan,colspan:?_colspan}}}

3.表格統計

Table 組件提供了?show-summary?屬性，說明：是否在表尾顯示合計行，它的值是?Boolean?類型的，如果設置為?true，則表格底部為會增加“合計”的一行，它只會統計單元格值是數字的列。

另外，配合這個屬性，還有一個?summary-method?的屬性，說明：自定義的合計計算方法，回調函數的參數?columns?和?data（表格顯示數據） 組成的對象。

:summary-method="getSummaries"

這樣我們在此封裝一個滿足自己規則的統計方法，如果單元格里已經包含了產品線的統計行，那么最后總的人力統計就要減去它。

getSummaries(param)?{const?{?columns?}?=?paramconst?sums?=?[]const?weekSum?=?{}this.deptManpowerSum.forEach((deptManpower,?index)?=>?{let?key?=?'col'?+?deptManpower.week.replace(/-/g,?'')weekSum[key]?=?deptManpower.weeklyTotal})columns.forEach((column,?index)?=>?{if?(index?===?0)?{sums[index]?=?'部門總人力'return}if?(weekSum.hasOwnProperty(column.property))?{sums[index]?=?weekSum[column.property]}?else?{sums[index]?=?''}})return?sums}

4.行展開

當表格展示數據有限，又不想單獨設置詳情頁面顯示，可以使用行的展開項，以文本的格式顯示。

需要用到兩個屬性?row-key?和?expand-row-keys?（通過該屬性設置 Table 目前的展開行，其值為展開行的 keys 數組）

:row-key="(row)?=>?{return?row.id}" :expand-row-keys="expandRows"

展開行的內容需要增加 type 屬性為 expand 的?el-table-column?標簽

<el-table-column?type="expand"><template?v-slot="{row}"></template> </el-table-column>

這樣默認觸發展開是點擊單元格中的向右箭頭。可以如果我們想點擊行的任何地方即可展開，該怎么辦？也是有辦法的，table 組件提供了?row-click?方法

@row-click="clickRowHandle"</pre>

它的回調的參數是行數據，我們在此維護了一個數組存儲當前展開行的?id?值。

clickRowHandle(row)?{if?(this.expandRows.includes(row.id))?{this.expandRows?=?this.expandRows.filter(val?=>?val?!==?row.id)}?else?{this.expandRows.push(row.id)} }

注意：這里有個陷阱，當你點擊向右箭頭展開和行以外的地方展開，兩個不同的事件，導致存儲的這個數組的值和事件不一致。即你從行點擊展開，數組中存儲了該行的?id?值，但是你點擊向右箭頭收起，而這個?id?并沒有從數組中移除，下次再次點擊其它行，這一行也會自動展開。

這個陷阱也是有辦法彌補的，從文檔中我們看到 Table 提供了另外一個?expand-change?方法，用于監聽行展開收起事件，這樣不管你從哪點擊行展開，都可以知道。

@expand-change="rowExpandChange"

該函數回調參數有兩個，一個是?row?和?expandedRows

rowExpandChange(row,?expandedRows)?{this.clickRowHandle(row) }

這樣我們在該方法中執行一遍以上點擊事件即可。

以上是我從項目中總結的常用的一些方式。Table 組件提供了豐富的屬性和方法，相信還可以結合使用實現更多有用的功能。

- END -

文章精選

前端如何進行日志驅動開發

微頁面開發設計指南

【詳細教程】教你如何使用Node + Express + Typescript開發一個應用

太空編程

分享硬核的編程知識

分享精彩，碼上快樂。JavaScript已然上天，有朝一日實現太空編程！回復【pdf】更有海量的優質電子書供下載。

總結

以上是生活随笔為你收集整理的Element Table 可以实现哪些常见的有用的功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。