el-table表格表尾合计行，指定合计某几列，自定义合计方法

最新推荐文章于 2025-07-22 11:01:58 发布

coderYYY

最新推荐文章于 2025-07-22 11:01:58 发布

阅读量2.8k

点赞数 19

CC 4.0 BY-SA版权

分类专栏： Vue elementUI 文章标签：前端 javascript vue.js elementui 前端框架

本文链接：https://blog.csdn.net/qq_23073811/article/details/142789365

🤵 作者：coderYYY
🧑 个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享🍀欢迎和我一起交流！🚀（评论和私信一般会回！！）
👉 个人专栏推荐：《前端项目教程以及代码》

✨一、前言

el-table如果加上show-summary属性，表尾第一列会显示“合计”二字，其余列会将本列所有数值进行求合操作，并显示出来。

<template>
  <el-table
    :data="tableData"
    border
    show-summary
    style="width: 100%">
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="amount1"
      sortable
      label="数值 1">
    </el-table-column>
    <el-table-column
      prop="