Element?Plus?Table實(shí)現(xiàn)表尾合計功能
更新時間：2025年07月28日 10:31:54 作者：獨(dú)淚了無痕
本文介紹了使用ElementPlus在Vue項(xiàng)目中實(shí)現(xiàn)表格行匯總功能,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
前言
在現(xiàn)代數(shù)據(jù)驅(qū)動的社會中，數(shù)據(jù)分析和統(tǒng)計成為了非常重要的任務(wù)。為了更有效地分析數(shù)據(jù)和展示統(tǒng)計結(jié)果，前端開發(fā)人員可以使用Vue框架和Element Plus組件庫來實(shí)現(xiàn)數(shù)據(jù)的統(tǒng)計和分析功能。以下是一個關(guān)于如何在 Element Plus 的 el-table 組件中實(shí)現(xiàn)行匯總功能的文檔，這個示例將展示如何計算每行的特定列的總和并顯示在一個額外的匯總行中。
一、準(zhǔn)備工作
安裝 Element Plus
首先，確保已經(jīng)安裝了 Element Plus。如果還沒有安裝，可以使用 npm 或 yarn 進(jìn)行安裝：
npm install element-plus --save # 或者使用 yarn yarn add element-plus
引入和注冊 Element Plus
在 Vue 項(xiàng)目中，首先需要引入并注冊 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');
二、表尾合計功能實(shí)現(xiàn)
數(shù)據(jù)準(zhǔn)備
在進(jìn)行數(shù)據(jù)的統(tǒng)計和分析之前，需要準(zhǔn)備好相應(yīng)的數(shù)據(jù)?？梢詮暮蠖薃PI獲取數(shù)據(jù)，也可以使用假數(shù)據(jù)。為了方便起見，我們在本文中使用假數(shù)據(jù)。
[
{"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}
]
基礎(chǔ)的表尾合計功能
在使用Element Plus時，表格合計是一個常見的需求，通常用于在表格底部顯示某列或某幾列數(shù)據(jù)的總和。在Element Plus中，可以通過配置表格的列定義來實(shí)現(xiàn)合計行，它可以幫助我們快速對表格中的數(shù)據(jù)進(jìn)行匯總和展示。在 Vue 中實(shí)現(xiàn)表格的表尾合計功能相當(dāng)簡單，el-table通過添加 show-summary 屬性即可在表格底部顯示合計行，實(shí)現(xiàn)基礎(chǔ)表尾合計功能。這個功能默認(rèn)是關(guān)閉的，需要顯式開啟。默認(rèn)情況下，對于合計行，第一列不進(jìn)行數(shù)據(jù)求合操作，而是顯示「合計」二字（可通過 sum-text 配置），其余列會將本列所有數(shù)值進(jìn)行求合操作，并顯示出來。
<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="數(shù)值 1" />
<el-table-column prop="amount2" sortable label="數(shù)值 2" />
<el-table-column prop="amount3" sortable label="數(shù)值 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="數(shù)值 1" />
<el-table-column prop="amount2" sortable label="數(shù)值 2" />
<el-table-column prop="amount3" sortable label="數(shù)值 3" />
</el-table>
</div>
</template>
進(jìn)階的表尾合計功能
我們已經(jīng)成功實(shí)現(xiàn)了基礎(chǔ)的表尾合計功能，但業(yè)務(wù)需求可能更為復(fù)雜，例如，我們希望在合計金額上再加上特定的貨幣符號和百分比等。這時，我們可以利用summary-method這個屬性來定義自己的合計計算方法。這個屬性接受一個函數(shù)作為參數(shù)，其中包含了列信息和數(shù)據(jù)信息，然后該函數(shù)將用于計算并返回一個合計結(jié)果數(shù)組。
<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";
// 需要進(jìn)行統(tǒng)計的列
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[]; // 原始數(shù)據(jù)
}) => {
const {columns, data} = param;
const sums: ( number | string | VNode)[] = [];
columns.forEach((column, index) => {
// 第一列不進(jìn)行求和操作，例如日期列或不需要的列，通用顯示文字'合計'或其他標(biāo)識符，根據(jù)需要自定義。
if (index === 0) {
sums[index] = '合計';
return;
}
// 最后一列通常是操作列，不進(jìn)行求和操作，可以留空或者根據(jù)需要顯示文字。
// if (index === columns.length - 1) {
// sums[index] = '';
// return;
// }
// 判斷遍歷的數(shù)據(jù)類型是否能轉(zhuǎn)換成數(shù)值類型，如果可以就表明值是 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]
);
// 一個空的結(jié)果數(shù)組，用來存放每一列的和
let sum: any = null;
//判斷數(shù)組中是否包含有string類型的值，并且是否能轉(zhuǎn)換成number類型(空字符串換成number類型為0)。如果不行，那就是說明包含了字符串類型的值。
if (values.every(item => !isNaN(Number(item)))) {
// 這是個遍歷數(shù)組的方法（用作累加器），第一個參數(shù)為回調(diào)函數(shù)，第二個參數(shù)為累加初始值。
sum = values.reduce((total, currentValue) => {
const value = Number(total);
// 確定數(shù)據(jù)是否為空,不為空進(jìn)行計算,為空返回原值
if (!isNaN(value)) {
return total + currentValue;
} else {
return total;
}
}, 0);
} else {
// 判斷是否為空，如果不為空就賦值sum
values.map(item => {
if (item != '') {
sum = 0
}
})
}
if (summaryColumns.value.includes(column.property)) {
sums[column.property] = sum;
}
});
// 根據(jù)實(shí)際列順序返回 sums 數(shù)組
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="數(shù)值 1" />
<el-table-column prop="amount2" sortable label="數(shù)值 2" />
<el-table-column prop="amount3" sortable label="數(shù)值 3" />
</el-table>
</div>
</template>
上段代碼的功能是對表格中的數(shù)據(jù)進(jìn)行合計處理。首先，通過解構(gòu)賦值從參數(shù)中獲取到columns和data，其中columns代表每列數(shù)據(jù)的屬性，通常在HTML中使用prop屬性進(jìn)行綁定。然后，利用forEach方法遍歷每一列，對于每一列的數(shù)據(jù)，我們使用reduce()方法進(jìn)行合計，并將結(jié)果存儲在sums數(shù)組中對應(yīng)的位置。這樣，最終我們得到了一個包含各列合計結(jié)果的數(shù)組。
需要注意的是，在實(shí)際的業(yè)務(wù)場景中，表格的數(shù)據(jù)可能涉及多頁，單頁計算可能并不足夠，后端通常需要生成專門的合計字段來進(jìn)行處理，通過接口返回給前端，前端展示表尾合計行。
<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[] // 原始數(shù)據(jù)
}
// 尾部計算合計
const getSummaries = (param: SummaryMethodProps) => {
const sums: (string | number | VNode)[] = [];
param.columns.forEach((column, index) => {
// 第一列不進(jìn)行求和操作，例如日期列或不需要的列，通用顯示文字'合計'或其他標(biāo)識符，根據(jù)需要自定義。
if (index === 0) {
sums[index] = '合計';
return;
}
// 根據(jù)當(dāng)前列綁定的字段名進(jìn)行判斷，根據(jù)字段名決定展示什么內(nèi)容
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;
}
});
// 根據(jù)實(shí)際列順序返回 sums 數(shù)組
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="數(shù)值 1" />
<el-table-column prop="amount2" sortable label="數(shù)值 2" />
<el-table-column prop="amount3" sortable label="數(shù)值 3" />
</el-table>
</div>
</template>
小結(jié)
使用Vue和Element Plus可以方便地實(shí)現(xiàn)數(shù)據(jù)的統(tǒng)計功能。在本文中，我們介紹了如何展示數(shù)據(jù)、統(tǒng)計數(shù)據(jù)，并提供了相關(guān)的代碼示例。在實(shí)際項(xiàng)目中，可以根據(jù)具體需求進(jìn)一步擴(kuò)展和優(yōu)化該組件。
到此這篇關(guān)于Element Plus Table實(shí)現(xiàn)表尾合計功能的文章就介紹到這了,更多相關(guān)Element Plus Table表尾合計內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了Vue組件高級通訊之$children與$parent，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue.extend,mixins和vue.component的區(qū)別及說明
Vue.extend 創(chuàng)建Vue的子類,可視為組件構(gòu)造函數(shù),Vue.mixin 允許全局添加方法或?qū)傩?方便所有組件使用,Vue.component 是插件注冊方法,通過Vue.extend創(chuàng)建的組件實(shí)例可以注冊到Vue全局,使其在任何組件中可用2024-09-09
這篇文章主要為大家詳細(xì)介紹了Ant Design封裝年份選擇組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
如何給element plus中動態(tài)form-item增加校驗(yàn)的可行方法
文章主要介紹了ElementPlus中動態(tài)生成el-form-item時如何使用內(nèi)置校驗(yàn)機(jī)制,通過設(shè)置prop屬性和使用行內(nèi)定義規(guī)則,結(jié)合v-model綁定響應(yīng)式數(shù)據(jù),實(shí)現(xiàn)動態(tài)表單項(xiàng)的校驗(yàn),還提到可以定義規(guī)則函數(shù)優(yōu)化代碼,并在提交時統(tǒng)一提示校驗(yàn)未通過的錯誤2026-04-04
vue利用全局導(dǎo)航守衛(wèi)作登錄后跳轉(zhuǎn)到未登錄前指定頁面的實(shí)例代碼
這篇文章主要介紹了vue利用全局導(dǎo)航守衛(wèi)作登錄后跳轉(zhuǎn)到未登錄前指定頁面,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
這篇文章主要介紹了vue超時計算的組件實(shí)例代碼,需要的朋友可以參考下2018-07-07
vue項(xiàng)目打包優(yōu)化的方法實(shí)戰(zhàn)記錄
最近入職了新公司,接手了一個新拆分出來的Vue項(xiàng)目,針對該項(xiàng)目做了個打包優(yōu)化,把經(jīng)驗(yàn)分享出來,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包優(yōu)化的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要為大家介紹了Avue?組件庫的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue3.0之Router的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了詳解vue簡單的store，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10