buildadmin+tp8表格操作(8) 表格下方添加 合计行

表格的下方可以自定义添加一个合计行,如果有其它的需求, 我们可以添加我们自已需要的行, 并不局限于合计行
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
以上就可以给表格的最下方添加一个合计行了
完整代码如下

<template><div class="default-main ba-table-box"><el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon /><TableHeader:buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']":quick-search-placeholder="t('Quick search placeholder', { fields: t('examples.table.summary.quick Search Fields') })"></TableHeader><!-- 示例核心代码(1/2) --><Table :show-summary="true" :summary-method="summaryMethod" ref="tableRef"></Table><PopupForm /></div>
</template><script setup lang="ts">
import { ref, provide, onMounted } from 'vue'
import baTableClass from '/@/utils/baTable'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import type { TableColumnCtx } from 'element-plus'defineOptions({name: 'examples/table/summary',
})const { t } = useI18n()
const tableRef = ref()
const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete'])// 示例核心代码(2/2)
const summaryMethod = ({ columns, data }: { columns: TableColumnCtx<any>[]; data: any }) => {const sums: string[] = []console.log(columns)  //columns 是表格的头部列名的数组对象, 从0开始计数console.log(data);    //data 是表格中,所有数据的集合columns.forEach((column, index) => {if (index == 0) {               //这里给第一列加了一个  “合计” 的字样sums[index] = '合计'return} else if (['1', '6', '7'].includes(index.toString())) {  //这里因为 第 2,7,8(从0列开始计数的) 列不是数字列, 所以返回了 “-”sums[index] = ' - 'return}//console.log(column.property);   column.propertty, 是new baTable中的column中,设置的 prop:属性//因为上面把 index = 0,  index = 1.6,7 都过滤掉了, 所以这里得到的都是数值型的数据了const values = data.map((item: any) => Number(item[column.property]))console.log(values);//所以这里把数值全部加起来就是一个合计内容了,  reduce 是一个合计的方法, 如果不太熟的话,  可以再次 for 循环一次if (!values.every((value: any) => Number.isNaN(value))) {let symbol = index == 2 ? '¥' : ''sums[index] = `${symbol}${values.reduce((prev: any, curr: any) => {const value = Number(curr)if (!Number.isNaN(value)) {return prev + curr               //这里合计完了之后, 返回 sums[index]} else {return prev}}, 0)}`} else {sums[index] = 'N/A'}})return sums
}const baTable = new baTableClass(new baTableApi('/admin/examples.table.Summary/'),{pk: 'id',column: [{ type: 'selection', align: 'center', operator: false },{ label: t('examples.table.summary.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },{ label: t('examples.table.summary.number1'), prop: 'number1', align: 'center', operator: 'RANGE', sortable: false },{ label: t('examples.table.summary.number2'), prop: 'number2', align: 'center', operator: 'RANGE', sortable: false },{ label: t('examples.table.summary.float1'), prop: 'float1', align: 'center', operator: 'RANGE', sortable: false },{ label: t('examples.table.summary.float2'), prop: 'float2', align: 'center', operator: 'RANGE', sortable: false },{label: t('examples.table.summary.create_time'),prop: 'create_time',align: 'center',render: 'datetime',operator: 'RANGE',sortable: 'custom',width: 160,timeFormat: 'yyyy-mm-dd hh:MM:ss',},{ label: t('Operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },],dblClickNotEditColumn: [undefined],},{defaultItems: { number1: 0, number2: 0, float1: 0, float2: 0 },}
)provide('baTable', baTable)onMounted(() => {baTable.table.ref = tableRef.valuebaTable.mount()baTable.getIndex()?.then(() => {baTable.initSort()baTable.dragSort()})
})
</script><style scoped lang="scss"></style>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AVL树你需要了解一下

AVL树介绍 AVL树是一种自平衡二叉查找树&#xff0c;它得名于发明者G.M.Adel’son-Vel’skii和E.M.Landis。AVL树的特点是任何节点的两个子树的高度最大差别为1&#xff0c;因此它也被称为高度平衡树。在AVL树中&#xff0c;每个节点的平衡因子只有-1、0、1三种&#xff0c;通…

人工智能给我们的生活带来了巨大的影响?

1. 人工智能从哪些方面给我们带来了影响&#xff1f; 人工智能出现&#xff0c;极大地影响了人类的生活&#xff0c;下面是人工智能所影响的领域&#xff1a; 1. 日常生活 智能家居: AI驱动的设备&#xff0c;如智能扬声器、灯光、恒温器&#xff0c;正在改变我们与家居环境的…

【鸿蒙最新全套教程】<HarmonyOS第一课>1、运行Hello World

下载与安装DevEco Studio 在HarmonyOS应用开发学习之前&#xff0c;需要进行一些准备工作&#xff0c;首先需要完成开发工具DevEco Studio的下载与安装以及环境配置。 进入DevEco Studio下载官网&#xff0c;单击“立即下载”进入下载页面。 DevEco Studio提供了Windows版本和…

文件上传漏洞(CVE-2022-23043)

简介 CVE-2022-23043是一个与Zenario CMS 9.2文件上传漏洞相关的安全漏洞。该漏洞被定义为文件的不加限制上传&#xff0c;攻击者可以利用这个漏洞上传webshell以执行任意命令。利用这个漏洞的攻击者暂无特定情况。要利用此漏洞&#xff0c;攻击者首先需要访问Zenario CMS的管…

Django 路由配置(二)

一、路由 就是根据用户请求的URL链接来判断对应的出来程序&#xff0c;并返回处理结果&#xff0c;也是就是URL和django的视图建立映射关系. 二、Django请求页面的步骤 1、首先Django确定要使用的根URLconf模块&#xff0c;通过ROOT_URLCONF来设置&#xff0c;在settings.py配置…

服务器数据恢复—OCFS2下raid5磁盘损坏导致阵列崩溃的数据恢复案例

服务器数据恢复环境&#xff1a; IBM某型号存储&#xff0c;6块sas硬盘组建一组raid5&#xff0c;划分一个lun分配给Linux服务器并格式化为OCFS2文件系统&#xff0c;共享给虚拟化使用&#xff0c;存放的数据包括24台liunx和windows虚拟机、压缩包文件和配置文件。 服务器故障…

学习笔记6——垃圾回收

学习笔记系列开头惯例发布一些寻亲消息 链接&#xff1a;https://baobeihuijia.com/bbhj/contents/3/190801.html java垃圾回收&#xff08;stop the world&#xff09; 专注于堆和方法区的垃圾回收&#xff0c;年轻代&#xff0c;老年代&#xff0c;永久代判断对象是否还存…

Java8Stream快速使用

将List集合存入流中 List<String> list new ArrayList<>();list.add("张一");list.add("张二");list.add("张三");list.add("李四");list.add("赵五");list.add("张六");list.add("王八"…

Linux进程通信——IPC、管道、FIFO的引入

进程间的通信——IPC 进程间通信 (IPC&#xff0c;InterProcess Communication) 是指在不同进程之间传播或交换信息。 IPC的方式通常有管道 (包括无名管道和命名管道) 、消息队列、信号量、共享存储、Socket、Streams等。其中 Socket和Streams支持不同主机上的两个进程IPC。 …

pyQt主界面与子界面切换简易框架

本篇来介绍使用python中是Qt功能包&#xff0c;设置一个简易的多界面切换框架&#xff0c;实现主界面和多个子界面直接的切换显示。 1 主界面 设计的Demo主界面如下&#xff0c;主界面上有两个按钮图标&#xff0c;点击即可切换到对应的功能界面中&#xff0c;进入子界面后&a…

【mediasoup】TransportCongestionControlClient 1: 代码走读

TransportCongestionControlClient 基于m77版本的libwebrtc ,但是TransportCongestionControlClient 并不是libwebrt中的,是mediasoup自己封装实现:TransportCongestionControlClient 用于发送端D:\XTRANS\soup\mediasoup-sfu-cpp\worker\src\RTC\TransportCongestionContro…

(动手学习深度学习)第13章 实战kaggle竞赛:CIFAR-10

导入相关库 import collections import math import os import shutil import pandas as pd import torch import torchvision from torch import nn from d2l import torch as d2l下载数据集 d2l.DATA_HUB[cifar10_tiny] (d2l.DATA_URL kaggle_cifar10_tiny.zip,2068874e4…

ElasticSearch在Windows上的下载与安装

Elasticsearch是一个开源的分布式搜索和分析引擎&#xff0c;它可以帮助我们快速地搜索、分析和处理大量数据。Elasticsearch能够快速地处理结构化和非结构化数据&#xff0c;支持全文检索、地理位置搜索、自动补全、聚合分析等功能&#xff0c;能够承载各种类型的应用&#xf…

基于Qt中操作MySQL数据库示例

# 一、安装驱动 ##(1)安装 在Qt中操作MySQL数据库首先要安装mysql的驱动文件,将MySQL下的libmusql.dll文件复制到Qt的安装路径下的bin文件夹下即可。 直接将libmysql.dll文件粘贴到此文件夹中。 ## (2)验证驱动是否安装成功 复制成功之后来测试一下驱动程序是否安装成功…

◢Django 分页+搜索

1、搜索数据 从数据库中获取数据&#xff0c;并进行筛选&#xff0c;xx__contains q作为条件&#xff0c;查找的是xx列中有q的所有数据条 当有多个筛选条件时&#xff0c;将条件变成一个字典&#xff0c;传入 **字典 &#xff0c;ORM会自行翻译并查找。 筛选电话号码这一列…

Java获取指定日期到当前日期的差距

Java获取指定日期到当前日期的差距 一、指定日期到今天的y年m月d日 private JSONObject getYesrMonthDay(String dataParam){JSONObject res new JSONObject();/*只比较年月日&#xff0c;不要时间*/DateTimeFormatter df DateTimeFormatter.ofPattern("yyyy-MM-dd&quo…

在Go编程中调用外部命令的几种场景

1.摘要 在很多场合, 使用Go语言需要调用外部命令来完成一些特定的任务, 例如: 使用Go语言调用Linux命令来获取执行的结果,又或者调用第三方程序执行来完成额外的任务。在go的标准库中, 专门提供了os/exec包来对调用外部程序提供支持, 本文将对调用外部命令的几种使用方法进行总…

【机器学习】034_多层感知机Part.2_从零实现多层感知机

一、解决XOR问题 1. 回顾XOR问题&#xff1a; 如图&#xff0c;如何对XOR面进行分割以划分四个输入 对应的输出 呢&#xff1f; 思路&#xff1a;采用两个分类器分类&#xff0c;每次分出两个输入 &#xff0c;再借助这两个分类从而分出 。 即采用同或运算&#xff0c;当两…

通过easyexcel实现数据导入功能

上一篇文章通过easyexcel导出数据到excel表格已经实现了简单的数据导出功能&#xff0c;这篇文章也介绍一下怎么通过easyexcel从excel表格中导入数据。 目录 一、前端代码 index.html index.js 二、后端代码 controller service SongServiceImpl 三、功能预览 四、后端…

WordPress画廊插件Envira Gallery v1.9.7河蟹版下载

Envira Gallery是一款功能强大的WordPress画廊插件。通过使用这个插件&#xff0c;你可以在WordPress的前台页面上创建出令人赏心悦目的图片画廊展示形式。 拖放生成器&#xff1a;轻松创建精美照片和视频画廊 自定义主题&#xff0c;打造独特外观 使用预设模板&#xff0c;为…