Element Plus Table 組件擴展：表尾合計功能詳解

前言

??在現代數據驅動的社會中，數據分析和統計成為了非常重要的任務。為了更有效地分析數據和展示統計結果，前端開發人員可以使用Vue框架和Element Plus組件庫來實現數據的統計和分析功能。以下是一個關于如何在 Element Plus 的 el-table 組件中實現行匯總功能的文檔，這個示例將展示如何計算每行的特定列的總和并顯示在一個額外的匯總行中。

一、準備工作

安裝 Element Plus

??首先，確保已經安裝了 Element Plus。如果還沒有安裝，可以使用 npm 或 yarn 進行安裝：

npm install element-plus --save
# 或者使用 yarn yarn add element-plus

引入和注冊 Element Plus

??在 Vue 項目中，首先需要引入并注冊 Element Plus 的組件：

// main.js 或 main.ts
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

表尾合計功能實現

數據準備

??在進行數據的統計和分析之前，需要準備好相應的數據。可以從后端API獲取數據，也可以使用假數據。為了方便起見，我們在本文中使用假數據。

[{"id":"12987122","name":"王小虎","amount1":"234","amount2":"3.2","amount3":10},{"id":"12987123","name":"王小虎","amount1":"165","amount2":"4.43","amount3":12},{"id":"12987124","name":"王小虎","amount1":"324","amount2":"1.9","amount3":9},{"id":"12987125","name":"王小虎","amount1":"621","amount2":"2.2","amount3":17},{"id":"12987126","name":"王小虎","amount1":"539","amount2":"4.1","amount3":15}
]

基礎的表尾合計功能

??在使用Element Plus時，表格合計是一個常見的需求，通常用于在表格底部顯示某列或某幾列數據的總和。在Element Plus中，可以通過配置表格的列定義來實現合計行，它可以幫助我們快速對表格中的數據進行匯總和展示。在 Vue 中實現表格的表尾合計功能相當簡單，el-table通過添加 show-summary 屬性即可在表格底部顯示合計行，實現基礎表尾合計功能。這個功能默認是關閉的，需要顯式開啟。默認情況下，對于合計行，第一列不進行數據求合操作，而是顯示「合計」二字（可通過 sum-text 配置），其余列會將本列所有數值進行求合操作，并顯示出來。

<script setup lang="ts">
import { ElementPlus } from '@element-plus/icons-vue'
import { version as epVersion } from 'element-plus'
import { ref, version as vueVersion } from 'vue'const tableDataWithSummary = ref([{id: '12987122',name: '王小虎',amount1: '234',amount2: '3.2',amount3: 10},{id: '12987123',name: '王小虎',amount1: '165',amount2: '4.43',amount3: 12},{id: '12987124',name: '王小虎',amount1: '324',amount2: '1.9',amount3: 9},{id: '12987125',name: '王小虎',amount1: '621',amount2: '2.2',amount3: 17},{id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}
]);</script><template><p><el-icon color="var(--el-color-primary)"><ElementPlus /></el-icon>Element Plus {{ epVersion }} + Vue {{ vueVersion }}</p><el-divider /><div><el-table :data="tableDataWithSummary" border style="width: 100%" show-summary><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="name" label="姓名" /><el-table-column prop="amount1" sortable label="數值 1" /><el-table-column prop="amount2" sortable label="數值 2" /><el-table-column prop="amount3" sortable label="數值 3" /></el-table></div><div><el-table :data="tableDataWithSummary" border style="width: 100%" show-summary sum-text="總價"><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="name" label="姓名" /><el-table-column prop="amount1" sortable label="數值 1" /><el-table-column prop="amount2" sortable label="數值 2" /><el-table-column prop="amount3" sortable label="數值 3" /></el-table></div>
</template>

進階的表尾合計功能

??我們已經成功實現了基礎的表尾合計功能，但業務需求可能更為復雜，例如，我們希望在合計金額上再加上特定的貨幣符號和百分比等。這時，我們可以利用summary-method這個屬性來定義自己的合計計算方法。這個屬性接受一個函數作為參數，其中包含了列信息和數據信息，然后該函數將用于計算并返回一個合計結果數組。

<script setup lang="ts">
import { ElementPlus } from '@element-plus/icons-vue'
import { version as epVersion } from 'element-plus'
import { ref, version as vueVersion } from 'vue'
import {VNode} from "vue";// 需要進行統計的列
const summaryColumns = ref(["amount1"])const tableDataWithSummary = ref([{id: '12987122',name: '王小虎',amount1: '234',amount2: '3.2',amount3: 10},{id: '12987123',name: '王小虎',amount1: '165',amount2: '4.43',amount3: 12},{id: '12987124',name: '王小虎',amount1: '324',amount2: '1.9',amount3: 9},{id: '12987125',name: '王小虎',amount1: '621',amount2: '2.2',amount3: 17},{id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}
]);// 尾部計算合計
const getSummaries = (param: {columns: any[]; // 所有列的集合data: any[]; // 原始數據
}) => {const {columns, data} = param;const sums: ( number | string | VNode)[] = [];columns.forEach((column, index) => {// 第一列不進行求和操作，例如日期列或不需要的列，通用顯示文字'合計'或其他標識符，根據需要自定義。if (index === 0) {sums[index] = '合計';return;}// 最后一列通常是操作列，不進行求和操作，可以留空或者根據需要顯示文字。// if (index === columns.length - 1) {// sums[index] = '';// return;// }// 判斷遍歷的數據類型是否能轉換成數值類型，如果可以就表明值是 number類型，否則是string類型。判斷string類型是否是空字符串，為空字符換成0，不為空字符串就不做處理。const values = data.map((item) => !isNaN(Number(item[column.property])) ? !isNaN(parseFloat(item[column.property])) ? parseFloat(item[column.property]) : item[column.property] == '' ? 0 : item[column.property] : item[column.property]);// 一個空的結果數組，用來存放每一列的和let sum: any = null;//判斷數組中是否包含有string類型的值，并且是否能轉換成number類型(空字符串換成number類型為0)。如果不行，那就是說明包含了字符串類型的值。if (values.every(item => !isNaN(Number(item)))) {// 這是個遍歷數組的方法（用作累加器），第一個參數為回調函數，第二個參數為累加初始值。sum = values.reduce((total, currentValue) => {const value = Number(total);// 確定數據是否為空,不為空進行計算,為空返回原值if (!isNaN(value)) {return total + currentValue;} else {return total;}}, 0);} else {// 判斷是否為空，如果不為空就賦值sumvalues.map(item => {if (item != '') {sum = 0}})}if (summaryColumns.value.includes(column.property)) {sums[column.property] = sum;}});// 根據實際列順序返回 sums 數組return columns.map((_, index) =>index === 0 ? sums[0] : sums[columns[index].property] || "")
}
</script><template><p><el-icon color="var(--el-color-primary)"><ElementPlus /></el-icon>Element Plus {{ epVersion }} + Vue {{ vueVersion }}</p><el-divider /><div><el-table :data="tableDataWithSummary" border style="width: 100%" show-summary :summary-method="getSummaries"><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="name" label="姓名" /><el-table-column prop="amount1" sortable label="數值 1" /><el-table-column prop="amount2" sortable label="數值 2" /><el-table-column prop="amount3" sortable label="數值 3" /></el-table></div>
</template>

??上段代碼的功能是對表格中的數據進行合計處理。首先，通過解構賦值從參數中獲取到columns和data，其中columns代表每列數據的屬性，通常在HTML中使用prop屬性進行綁定。然后，利用forEach方法遍歷每一列，對于每一列的數據，我們使用reduce()方法進行合計，并將結果存儲在sums數組中對應的位置。這樣，最終我們得到了一個包含各列合計結果的數組。

??需要注意的是，在實際的業務場景中，表格的數據可能涉及多頁，單頁計算可能并不足夠，后端通常需要生成專門的合計字段來進行處理，通過接口返回給前端，前端展示表尾合計行。

<script setup lang="ts">
import {ElementPlus} from '@element-plus/icons-vue'
import {version as epVersion} from 'element-plus'
import {ref, version as vueVersion} from 'vue'
import {TableColumnCtx} from "element-plus";
import {VNode} from "vue";const tableDataWithSummary = ref({tableData: [{id: '12987122', name: '王小虎', amount1: '234', amount2: '3.2', amount3: 10},{id: '12987123', name: '王小虎', amount1: '165', amount2: '4.43', amount3: 12},{id: '12987124', name: '王小虎', amount1: '324', amount2: '1.9', amount3: 9},{id: '12987125', name: '王小虎', amount1: '621', amount2: '2.2', amount3: 17},{id: '12987126', name: '王小虎', amount1: '539', amount2: '4.1', amount3: 15}], tableSum: {amount1Sum: 1883,amount2Sum: 15.83,amount3Sum: 63}
});interface UserInfo {id: string;name: string;amount1: string;amount2: string;amount3: number;
}interface SummaryMethodProps<T = UserInfo> {columns: TableColumnCtx<T>[] // 所有列的集合data: T[] // 原始數據
}// 尾部計算合計
const getSummaries = (param: SummaryMethodProps) => {const sums: (string | number | VNode)[] = [];param.columns.forEach((column, index) => {// 第一列不進行求和操作，例如日期列或不需要的列，通用顯示文字'合計'或其他標識符，根據需要自定義。if (index === 0) {sums[index] = '合計';return;}// 根據當前列綁定的字段名進行判斷，根據字段名決定展示什么內容switch (column.property) {case 'amount1':sums[index] = tableDataWithSummary.value.tableSum.amount1Sum;break;case 'amount2':sums[index] = tableDataWithSummary.value.tableSum.amount2Sum;break;case 'amount3':sums[index] = tableDataWithSummary.value.tableSum.amount3Sum;break;default:sums[index] = '';break;}});// 根據實際列順序返回 sums 數組return param.columns.map((_, index) =>index === 0 ? sums[0] : sums[index] || '')
}
</script><template><p><el-icon color="var(--el-color-primary)"><ElementPlus /></el-icon>Element Plus {{ epVersion }} + Vue {{ vueVersion }}</p><el-divider /><div><el-table :data="tableDataWithSummary.tableData" style="width: 100%" show-summary :summary-method="getSummaries"><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="name" label="姓名" /><el-table-column prop="amount1" sortable label="數值 1" /><el-table-column prop="amount2" sortable label="數值 2" /><el-table-column prop="amount3" sortable label="數值 3" /></el-table></div>
</template>