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