vue表单增加合计

vue表单增加合计,有两种方式:

第一种前端获取所有数据:

将 show-summary 设置为true就会在表格尾部展示合计行。 默认情况下,对于合计行,第一列不进行数据求合操作,而是显示「合计」二字(可通过sum-text配置),其余列会将本列所有数值进行求合操作,并显示出来。
在这里插入图片描述

<el-table :data="tableData" border show-summary style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="amount1" sortable label="Amount 1" />
    <el-table-column prop="amount2" sortable label="Amount 2" />
    <el-table-column prop="amount3" sortable label="Amount 3" />
  </el-table>

优点:方法简单
缺点:只能统计当前页的数据,所有数据合计无法做到

第二种方式,后端访问统计数据,前端使用getSummaries展示到表单

先看效果:
在这里插入图片描述

<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" show-summary :summary-method="getSummaries">
      <el-table-column label="账单日期" align="center" prop="billingDate" sortable  width="120px"/>
      <el-table-column label="门店名称" align="center" prop="storeName" sortable  width="180px"/>
      <el-table-column label="订单号" align="center" prop="orderNumber" sortable  width="180px"/>
      <el-table-column label="商家应收款" align="center" prop="merchantIncome" sortable />
      <el-table-column label="打包袋" align="center" prop="packingBagFee" sortable />
</el-table>

const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数据
const total = ref(0)
const summary_data = ref() // 汇总数据

const getList = async () => {
  loading.value = true
  try {
    const data = await SrSellOrderDetailCompleteApi.page(queryParams)
    const summary = await SrSellOrderDetailCompleteApi.summary(queryParams)
    list.value = data.list
    total.value = data.total
    summary_data.value = summary
  } finally {
    loading.value = false
  }
}

const getSummaries = ({ columns }) => {
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计';
      return;
    }
    const prop = column.property;
    if (summary_data.value && prop in summary_data.value) {
      sums[index] = summary_data.value[prop];
    } else {
      sums[index] = 'N/A';
    }
  });
  return sums;
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/773928.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode刷题记录:(14)文本左右对齐

遇见困难题不要怕&#xff0c;说不定就是一个简单模拟题 . 执行用时 相关企业 leetcode 传送通道 class Solution {List<String> ans new ArrayList<>(); // 本题答案列表int[] lens; // 记录每个单词长度&#xff0c;方便后续补齐空格操作int maxRowLen; // 替代…

sql业务场景分析思路参考

1、时间可以进行排序&#xff0c;也可以用聚合函数对时间求最大值max&#xff08;时间&#xff09; 例如下面的例子&#xff1a;取最晚入职的人&#xff0c;那就是将入职时间倒序排序&#xff0c;然后limit 1 表&#xff1a; 场景&#xff1a;查找最晚入职员工的所有信息 se…

【数据集】中国农田栅格数据CACD(1986-2021)

中国农田栅格数据(1986-2021) 数据概述数据下载参考精确、详细和及时的耕地范围信息对于保障食品安全和环境可持续性至关重要。然而,由于农业景观的复杂性以及缺乏足够的训练样本,要在大范围地理区域内高空间和时间分辨率下监测耕地动态仍然具有挑战性,特别是对于农业土地…

抖音本地生活服务商入驻要求中暗含哪些信息?入局要点都在里面了!

随着抖音外卖的正式开放&#xff0c;许多创业者对于做抖音本地生活服务商的意向愈发强烈&#xff0c;抖音本地生活服务商入驻要求及相关话题更是在多个创业者群内被翻来覆去地讨论&#xff0c;且多次刷屏。 而就抖音目前在本地生活市场的布局来看&#xff0c;其主要的重心还是…

哪里还可以申请免费一年期的SSL证书?

目前&#xff0c;要申请免费一年期的SSL证书&#xff0c;选项较为有限&#xff0c;因为多数供应商已转向提供短期的免费证书&#xff0c;通常有效期为90天。不过&#xff0c;有一个例外是JoySSL&#xff0c;它仍然提供一年期的免费SSL证书&#xff0c;但是只针对教育版和政务版…

【人工智能】--强化学习(2.0)

个人主页&#xff1a;欢迎来到 Papicatch的博客 课设专栏 &#xff1a;学生成绩管理系统 专业知识专栏&#xff1a; 专业知识 文章目录 &#x1f349;强化学习与有监督学习的区别 &#x1f348;数据特点 &#x1f348;学习目标 &#x1f348;反馈机制 &#x1f348;策略…

如何在word中敲出可以点击打勾和取消打勾的方框呢?

文章目录 要解决的问题网上出现的几种不可行的方案发现解决措施 要解决的问题 在word中敲出 点击就可以打对勾和取消对钩的方框 网上出现的几种不可行的方案 插入-> 符号&#xff0c;此方法打出的方框是fixed的&#xff0c;不是我想要的可以自己自主打勾和不打勾的方式。 …

Python获取QQ音乐歌单歌曲

准备工作 歌单分享的url地址 比如&#xff1a; https://i.y.qq.com/n2/m/share/details/taoge.html?hosteuinoKvzoK4l7evk7n**&id9102222552&appversion130605&ADTAGwxfshare&appshareiphone_wx 代码实现 def mu(share_url):share_url share_url.split(id…

CFS三层内网渗透——外网打点(一)

目录 外网打点 先爆破一下看看有没有啥可进攻路径 尝试那个可疑的路径发现是thinkphp这个框架&#xff0c;同时也知道了版本&#xff0c;那就nday打吧 写入php ​编辑写入php成功&#xff0c;简简单单nday拿下​编辑 蚁剑rce尝试链接 打点成功 外网打点 先爆破一下看看有…

Odoo 16 采购仪表盘概述

Odoo 16 的高级采购管理系统可让您轻松跟踪采购订单、定义产品、管理供应商和准备产品/服务。您可以在采购模块中管理与产品采购相关的所有功能。此模块还允许您跟踪采购订单和报价请求。将采购模块的功能与其他 Odoo 16 模块&#xff08;如会计、库存、销售和发票&#xff09;…

用免费的可视化工具制作3D智慧城市大屏,融合数字孪生,引领数据升级

在如今数据驱动的时代&#xff0c;越来越多的场景中都有可视化大屏的身影&#xff0c;许多企业和政府部门也从常规的二维看板渐渐地转向更加炫酷&#xff0c;立体的3D可视化大屏。3D可视化大屏成为了展示复杂数据、实时监控业务动态的重要工具。本文将详细介绍如何使用免费的数…

小型气象站在现代农业中的应用与前景

随着科技的飞速发展&#xff0c;智慧农业已成为现代农业发展的重要趋势。在这一背景下&#xff0c;小型气象站作为智慧农业的重要组成部分&#xff0c;正逐渐展现出其独特的价值和广阔的应用前景。本文将从小型气象站的定义、功能、应用案例以及未来展望等方面&#xff0c;探讨…

【网络安全】第4讲 身份认证技术(笔记)

一、身份认证技术概述 1、身份认证 是网络安全的第一道防线。是最基本的安全服务&#xff0c;其他的安全服务都依赖于它。在物联网应用系统中&#xff0c;身份认证也是整个物联网应用层信息安全体系的基础。 2、基本身份认证技术 &#xff08;1&#xff09;双方认证 是一种双…

工业废水中镍超标怎么办?含镍废水处理方法有哪些?

镍是一种存在于自然界中的过渡金属。镍在土壤和岩石中的存量丰富&#xff0c;大部分镍已被氧化&#xff0c;或与其他元素结合成化合物。   含镍废水主要来源于电镀、合金制造、金属表面处理、电子等行业。这些行业在生产过程中&#xff0c;通常会使用含有镍离子的化学试剂&a…

PyCharm中如何将某个文件设置为默认运行文件

之前在使用JetBrain公司的另一款软件IDEA的时候&#xff0c;如果在选中static main函数后按键altenter可以默认以后运行Main类的main函数。最近在使用PyCharm学习Python&#xff0c;既然同为一家公司的产品而且二者的风格如此之像&#xff0c;所以我怀疑PyCharm中肯定也有类似的…

HttpServer内存马

HttpServer内存马 基础知识 一些基础的方法和类 HttpServer&#xff1a;HttpServer主要是通过带参的create方法来创建&#xff0c;第一个参数InetSocketAddress表示绑定的ip地址和端口号。第二个参数为int类型&#xff0c;表示允许排队的最大TCP连接数&#xff0c;如果该值小…

Android 10.0 关于定制自适应AdaptiveIconDrawable类型的动态时钟图标的功能实现系列一

1.前言 在10.0的系统rom定制化开发中,在关于定制动态时钟图标中,原系统是不支持动态时钟图标的功能,所以就需要从新 定制动态时钟图标关于自适应AdaptiveIconDrawable类型的样式,就是可以支持当改变系统图标样式变化时,动态时钟 图标的背景图形也跟着改变,所以接下来就来…

如何使用C++调用Pytorch模型进行推理测试:使用libtorch库

如何使用C调用Pytorch模型进行推理测试&#xff1a;使用libtorch库 目录 如何使用C调用Pytorch模型进行推理测试&#xff1a;使用libtorch库一、环境准备1&#xff0c;linux&#xff1a;以ubuntu 22.04系统为例1. 准备CUDA和CUDNN2. 准备C环境3, 下载libtorch文件4, 编写测试li…

uniapp中实现跳转链接到游览器(安卓-h5)

uniapp中实现跳转链接到游览器&#xff08;安卓-h5&#xff09; 项目中需要做到跳转到外部链接&#xff0c;网上找了很多都不是很符合自己的要求&#xff0c;需要编译成app后是跳转到游览器打开链接&#xff0c;编译成web是在新窗口打开链接。实现的代码如下&#xff1a; 效果&…

“谋士三国”诸葛亮的锦囊妙计 - 策略模式

“当代码如三国&#xff0c;智慧如孔明&#xff0c;何愁天下设计不归一统&#xff1f;” 乱世之中&#xff0c;英雄辈出。三国的战场上&#xff0c;不仅刀光剑影&#xff0c;更有智慧的较量。诸葛亮的锦囊妙计&#xff0c;不正是今日软件设计中策略模式的完美写照吗&#xff1…