Element?Plus?Table實現(xiàn)表尾合計功能

更新時間：2025年07月28日 10:31:54 作者：獨淚了無痕

本文介紹了使用ElementPlus在Vue項目中實現(xiàn)表格行匯總功能,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

前言

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

一、準備工作

安裝 Element Plus

首先，確保已經(jīng)安裝了 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');

二、表尾合計功能實現(xiàn)

數(shù)據(jù)準備

在進行數(shù)據(jù)的統(tǒ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}
]

基礎的表尾合計功能

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

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īng)成功實現(xiàn)了基礎的表尾合計功能，但業(yè)務需求可能更為復雜，例如，我們希望在合計金額上再加上特定的貨幣符號和百分比等。這時，我們可以利用summary-method這個屬性來定義自己的合計計算方法。這個屬性接受一個函數(shù)作為參數(shù)，其中包含了列信息和數(shù)據(jù)信息，然后該函數(shù)將用于計算并返回一個合計結果數(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";

// 需要進行統(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ù)需要自定義。
    if (index === 0) {
      sums[index] = '合計';
      return;
    }

    // 最后一列通常是操作列，不進行求和操作，可以留空或者根據(jù)需要顯示文字。
    // if (index === columns.length - 1) {
      // sums[index] = '';
      // return;
    // }

    // 判斷遍歷的數(shù)據(jù)類型是否能轉換成數(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]
    );
    // 一個空的結果數(shù)組，用來存放每一列的和
    let sum: any = null;
    //判斷數(shù)組中是否包含有string類型的值，并且是否能轉換成number類型(空字符串換成number類型為0)。如果不行，那就是說明包含了字符串類型的值。
    if (values.every(item => !isNaN(Number(item)))) {
      // 這是個遍歷數(shù)組的方法（用作累加器），第一個參數(shù)為回調函數(shù)，第二個參數(shù)為累加初始值。
      sum = values.reduce((total, currentValue) => {
        const value = Number(total);
        // 確定數(shù)據(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ù)實際列順序返回 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ù)進行合計處理。首先，通過解構賦值從參數(shù)中獲取到columns和data，其中columns代表每列數(shù)據(jù)的屬性，通常在HTML中使用prop屬性進行綁定。然后，利用forEach方法遍歷每一列，對于每一列的數(shù)據(jù)，我們使用reduce()方法進行合計，并將結果存儲在sums數(shù)組中對應的位置。這樣，最終我們得到了一個包含各列合計結果的數(shù)組。

需要注意的是，在實際的業(yè)務場景中，表格的數(shù)據(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ù)
}

// 尾部計算合計
const getSummaries = (param: SummaryMethodProps) => {
  const sums: (string | number | VNode)[] = [];
  param.columns.forEach((column, index) => {
    // 第一列不進行求和操作，例如日期列或不需要的列，通用顯示文字'合計'或其他標識符，根據(jù)需要自定義。
    if (index === 0) {
      sums[index] = '合計';
      return;
    }
    // 根據(jù)當前列綁定的字段名進行判斷，根據(jù)字段名決定展示什么內容
    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ù)實際列順序返回 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>